<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/icon.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/icon.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"right","width":300,"display":"hide","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"disqus","storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="[常用的前端JavaScript方法封装]1、输入一个值，返回其数据类型1234function type(para) &amp;#123;    return Object.prototype.toString.call(para)&amp;#125;  2、数组去重123456789101112131415161718192021222324function unique1(arr) &amp;#123;    re">
<meta property="og:type" content="article">
<meta property="og:title" content="常用的前端JavaScript方法封装">
<meta property="og:url" content="http://example.com/2021/12/09/%E5%B8%B8%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AFJavaScript%E6%96%B9%E6%B3%95%E5%B0%81%E8%A3%85/index.html">
<meta property="og:site_name" content="爱笑爱工作-_-">
<meta property="og:description" content="[常用的前端JavaScript方法封装]1、输入一个值，返回其数据类型1234function type(para) &amp;#123;    return Object.prototype.toString.call(para)&amp;#125;  2、数组去重123456789101112131415161718192021222324function unique1(arr) &amp;#123;    re">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-12-09T09:41:22.309Z">
<meta property="article:modified_time" content="2021-12-09T14:30:52.572Z">
<meta property="article:author" content="爱笑">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://example.com/2021/12/09/%E5%B8%B8%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AFJavaScript%E6%96%B9%E6%B3%95%E5%B0%81%E8%A3%85/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>常用的前端JavaScript方法封装 | 爱笑爱工作-_-</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
<a target="_blank" rel="noopener" href="https://github.com/aixiao0322" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>


    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">爱笑爱工作-_-</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-首页">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-目录">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>目录</a>

  </li>
        <li class="menu-item menu-item-分类">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-标签">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-关于">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/12/09/%E5%B8%B8%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AFJavaScript%E6%96%B9%E6%B3%95%E5%B0%81%E8%A3%85/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/title.jpg">
      <meta itemprop="name" content="爱笑">
      <meta itemprop="description" content="热衷于前端，热衷于王者，王者峡谷乱杀 -_-">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="爱笑爱工作-_-">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          常用的前端JavaScript方法封装
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2021-12-09 17:41:22 / 修改时间：22:30:52" itemprop="dateCreated datePublished" datetime="2021-12-09T17:41:22+08:00">2021-12-09</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/javascript/" itemprop="url" rel="index"><span itemprop="name">javascript</span></a>
                </span>
            </span>

          
            <span id="/2021/12/09/%E5%B8%B8%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AFJavaScript%E6%96%B9%E6%B3%95%E5%B0%81%E8%A3%85/" class="post-meta-item leancloud_visitors" data-flag-title="常用的前端JavaScript方法封装" title="阅读次数">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span class="leancloud-visitors-count"></span>
              <span>℃</span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2021/12/09/%E5%B8%B8%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AFJavaScript%E6%96%B9%E6%B3%95%E5%B0%81%E8%A3%85/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2021/12/09/%E5%B8%B8%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AFJavaScript%E6%96%B9%E6%B3%95%E5%B0%81%E8%A3%85/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id><a href="#" class="headerlink" title></a></h1><h1 id="常用的前端JavaScript方法封装"><a href="#常用的前端JavaScript方法封装" class="headerlink" title="[常用的前端JavaScript方法封装]"></a>[常用的前端JavaScript方法封装]</h1><h5 id="1、输入一个值，返回其数据类型"><a href="#1、输入一个值，返回其数据类型" class="headerlink" title="1、输入一个值，返回其数据类型"></a><strong>1、输入一个值，返回其数据类型</strong></h5><figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title">type</span>(para) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="type">Object.prototype.toString.call(para)</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="2、数组去重"><a href="#2、数组去重" class="headerlink" title="2、数组去重"></a><strong>2、数组去重</strong></h5><figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">unique1</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [...<span class="keyword">new</span> Set(arr)]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">unique2</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line">    <span class="keyword">return</span> arr.filter(<span class="function"><span class="params">ele</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (!obj[ele]) &#123;</span><br><span class="line">            obj[ele] = <span class="literal">true</span>;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">unique3</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result = [];</span><br><span class="line">    arr.forEach(<span class="function"><span class="params">ele</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (result.indexOf(ele) == <span class="number">-1</span>) &#123;</span><br><span class="line">            result.push(ele)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="3、字符串去重"><a href="#3、字符串去重" class="headerlink" title="3、字符串去重"></a><strong>3、字符串去重</strong></h5><span id="more"></span>

<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">String.prototype.unique = function () &#123;</span><br><span class="line">    <span class="keyword">var</span> obj = &#123;&#125;,</span><br><span class="line">        str = <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">        len = <span class="keyword">this</span>.length;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (!obj[<span class="keyword">this</span>[i]]) &#123;</span><br><span class="line">            str += <span class="keyword">this</span>[i];</span><br><span class="line">            obj[<span class="keyword">this</span>[i]] = <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> str;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">###### <span class="comment">//去除连续的字符串 </span></span><br><span class="line">function uniq(str) &#123;</span><br><span class="line">    <span class="keyword">return</span> str.replace(/(\w)\<span class="number">1</span>+/g, <span class="string">&#x27;$1&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="4、深拷贝-浅拷贝"><a href="#4、深拷贝-浅拷贝" class="headerlink" title="4、深拷贝 浅拷贝"></a><strong>4、深拷贝 浅拷贝</strong></h5><figure class="highlight stata"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//深克隆（深克隆不考虑函数）</span></span><br><span class="line">function deepClone(obj, result) &#123;</span><br><span class="line">    <span class="keyword">var</span> result = result || &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> <span class="keyword">prop</span> <span class="keyword">in</span> obj) &#123;</span><br><span class="line">        <span class="keyword">if</span> (obj.hasOwnProperty(<span class="keyword">prop</span>)) &#123;</span><br><span class="line">            <span class="keyword">if</span> (<span class="keyword">typeof</span> obj[<span class="keyword">prop</span>] == &#x27;object&#x27; &amp;&amp; obj[<span class="keyword">prop</span>] !== null) &#123;</span><br><span class="line">                <span class="comment">// 引用值(obj/array)且不为null</span></span><br><span class="line">                <span class="keyword">if</span> (Object.prototype.<span class="keyword">toString</span>.call(obj[<span class="keyword">prop</span>]) == &#x27;[object Object]&#x27;) &#123;</span><br><span class="line">                    <span class="comment">// 对象</span></span><br><span class="line">                    result[<span class="keyword">prop</span>] = &#123;&#125;;</span><br><span class="line">                &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                    <span class="comment">// 数组</span></span><br><span class="line">                    result[<span class="keyword">prop</span>] = [];</span><br><span class="line">                &#125;</span><br><span class="line">                deepClone(obj[<span class="keyword">prop</span>], result[<span class="keyword">prop</span>])</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 原始值或func</span></span><br><span class="line">        result[<span class="keyword">prop</span>] = obj[<span class="keyword">prop</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 深浅克隆是针对引用值</span></span><br><span class="line">function deepClone(target) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> (target) !== &#x27;object&#x27;) &#123;</span><br><span class="line">        <span class="keyword">return</span> target;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> result;</span><br><span class="line">    <span class="keyword">if</span> (Object.prototype.<span class="keyword">toString</span>.call(target) == &#x27;[object Array]&#x27;) &#123;</span><br><span class="line">        <span class="comment">// 数组</span></span><br><span class="line">        result = []</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 对象</span></span><br><span class="line">        result = &#123;&#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> <span class="keyword">prop</span> <span class="keyword">in</span> target) &#123;</span><br><span class="line">        <span class="keyword">if</span> (target.hasOwnProperty(<span class="keyword">prop</span>)) &#123;</span><br><span class="line">            result[<span class="keyword">prop</span>] = deepClone(target[<span class="keyword">prop</span>])</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 无法复制函数</span></span><br><span class="line"><span class="keyword">var</span> o1 = jsON.<span class="keyword">parse</span>(jsON.stringify(obj1));</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="5、reverse底层原理和扩展"><a href="#5、reverse底层原理和扩展" class="headerlink" title="5、reverse底层原理和扩展"></a><strong>5、reverse底层原理和扩展</strong></h5><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 改变原数组</span></span><br><span class="line">Array.prototype.myReverse = function () &#123;</span><br><span class="line">    <span class="keyword">var</span> len = <span class="keyword">this</span>.length;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        <span class="keyword">var</span> temp = <span class="keyword">this</span>[i];</span><br><span class="line">        <span class="keyword">this</span>[i] = <span class="keyword">this</span>[len - <span class="number">1</span> - i];</span><br><span class="line">        <span class="keyword">this</span>[len - <span class="number">1</span> - i] = temp;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="6、圣杯模式的继承"><a href="#6、圣杯模式的继承" class="headerlink" title="6、圣杯模式的继承"></a><strong>6、圣杯模式的继承</strong></h5><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="keyword">inherit</span>(Target, Origin) &#123;</span><br><span class="line">    <span class="keyword">function</span> <span class="constructor">F()</span> &#123;&#125;;</span><br><span class="line">    <span class="module-access"><span class="module"><span class="identifier">F</span>.</span></span>prototype = <span class="module-access"><span class="module"><span class="identifier">Origin</span>.</span></span>prototype;</span><br><span class="line">    <span class="module-access"><span class="module"><span class="identifier">Target</span>.</span></span>prototype = <span class="keyword">new</span> <span class="constructor">F()</span>;</span><br><span class="line">    <span class="module-access"><span class="module"><span class="identifier">Target</span>.</span></span>prototype.constructor = Target;</span><br><span class="line">    <span class="comment">// 最终的原型指向</span></span><br><span class="line">    <span class="module-access"><span class="module"><span class="identifier">Target</span>.</span></span>prop.uber = <span class="module-access"><span class="module"><span class="identifier">Origin</span>.</span></span>prototype;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="7、找出字符串中第一次只出现一次的字母"><a href="#7、找出字符串中第一次只出现一次的字母" class="headerlink" title="7、找出字符串中第一次只出现一次的字母"></a><strong>7、找出字符串中第一次只出现一次的字母</strong></h5><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">String.prototype.firstAppear = function () &#123;</span><br><span class="line">    <span class="keyword">var</span> obj = &#123;&#125;,</span><br><span class="line">        len = <span class="keyword">this</span>.length;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (obj[<span class="keyword">this</span>[i]]) &#123;</span><br><span class="line">            obj[<span class="keyword">this</span>[i]]++;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            obj[<span class="keyword">this</span>[i]] = <span class="number">1</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> prop <span class="keyword">in</span> obj) &#123;</span><br><span class="line">       <span class="keyword">if</span> (obj[prop] == <span class="number">1</span>) &#123;</span><br><span class="line">         <span class="keyword">return</span> prop;</span><br><span class="line">       &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="8、找元素的第n级父元素"><a href="#8、找元素的第n级父元素" class="headerlink" title="8、找元素的第n级父元素"></a><strong>8、找元素的第n级父元素</strong></h5><figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title">parents</span>(ele, n) &#123;</span><br><span class="line">    while (ele &amp;&amp; n) &#123;</span><br><span class="line">        ele = ele.parentElement ? ele.parentElement : <span class="type">ele.parentNode</span>;</span><br><span class="line">        n<span class="comment">--;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="type">ele</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="9、-返回元素的第n个兄弟节点"><a href="#9、-返回元素的第n个兄弟节点" class="headerlink" title="9、 返回元素的第n个兄弟节点"></a><strong>9、 返回元素的第n个兄弟节点</strong></h5><figure class="highlight stan"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">function retSibling(<span class="built_in">e</span>, n) &#123;</span><br><span class="line">    <span class="keyword">while</span> (<span class="built_in">e</span> &amp;&amp; n) &#123;</span><br><span class="line">        <span class="keyword">if</span> (n &gt; <span class="number">0</span>) &#123;</span><br><span class="line">            <span class="keyword">if</span> (<span class="built_in">e</span>.nextElementSibling) &#123;</span><br><span class="line">                <span class="built_in">e</span> = <span class="built_in">e</span>.nextElementSibling;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="keyword">for</span> (<span class="built_in">e</span> = <span class="built_in">e</span>.nextSibling; <span class="built_in">e</span> &amp;&amp; <span class="built_in">e</span>.nodeType !== <span class="number">1</span>; <span class="built_in">e</span> = <span class="built_in">e</span>.nextSibling);</span><br><span class="line">            &#125;</span><br><span class="line">            n--;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (<span class="built_in">e</span>.previousElementSibling) &#123;</span><br><span class="line">                <span class="built_in">e</span> = <span class="built_in">e</span>.previousElementSibling;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="keyword">for</span> (<span class="built_in">e</span> = <span class="built_in">e</span>.previousElementSibling; <span class="built_in">e</span> &amp;&amp; <span class="built_in">e</span>.nodeType !== <span class="number">1</span>; <span class="built_in">e</span> = <span class="built_in">e</span>.previousElementSibling);</span><br><span class="line">            &#125;</span><br><span class="line">            n++;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">e</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="10、封装mychildren，解决浏览器的兼容问题"><a href="#10、封装mychildren，解决浏览器的兼容问题" class="headerlink" title="10、封装mychildren，解决浏览器的兼容问题"></a><strong>10、封装mychildren，解决浏览器的兼容问题</strong></h5><figure class="highlight openscad"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myChildren</span><span class="params">(e)</span> &#123;</span></span><br><span class="line">    var <span class="built_in">children</span> = e.childNodes,</span><br><span class="line">        arr = [],</span><br><span class="line">        len = <span class="built_in">children</span>.length;</span><br><span class="line">    <span class="keyword">for</span> (var i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">children</span>[i].nodeType === <span class="number">1</span>) &#123;</span><br><span class="line">            arr.push(<span class="built_in">children</span>[i])</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="11、判断元素有没有子元素"><a href="#11、判断元素有没有子元素" class="headerlink" title="11、判断元素有没有子元素"></a><strong>11、判断元素有没有子元素</strong></h5><figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">hasChildren</span><span class="params">(e)</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> children = e.childNodes,</span><br><span class="line">        len = children.length;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (children[i].nodeType === <span class="number">1</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="12、我一个元素插入到另一个元素的后面"><a href="#12、我一个元素插入到另一个元素的后面" class="headerlink" title="12、我一个元素插入到另一个元素的后面"></a><strong>12、我一个元素插入到另一个元素的后面</strong></h5><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="module-access"><span class="module"><span class="identifier">Element</span>.</span></span>prototype.insertAfter = <span class="keyword">function</span> (target, elen) &#123;</span><br><span class="line">    var nextElen = elen.nextElenmentSibling;</span><br><span class="line">    <span class="keyword">if</span> (nextElen<span class="operator"> == </span>null) &#123;</span><br><span class="line">        this.append<span class="constructor">Child(<span class="params">target</span>)</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        this.insert<span class="constructor">Before(<span class="params">target</span>, <span class="params">nextElen</span>)</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="13、返回当前的时间（年月日时分秒）"><a href="#13、返回当前的时间（年月日时分秒）" class="headerlink" title="13、返回当前的时间（年月日时分秒）"></a><strong>13、返回当前的时间（年月日时分秒）</strong></h5><figure class="highlight excel"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">function getDateTime() &#123;</span><br><span class="line">    <span class="built_in">var</span> <span class="built_in">date</span> = new <span class="built_in">Date</span>(),</span><br><span class="line">        <span class="built_in">year</span> = date.getFullYear(),</span><br><span class="line">        <span class="built_in">month</span> = date.getMonth() + <span class="number">1</span>,</span><br><span class="line">        <span class="built_in">day</span> = date.getDate(),</span><br><span class="line">        <span class="built_in">hour</span> = date.getHours() + <span class="number">1</span>,</span><br><span class="line">        <span class="built_in">minute</span> = date.getMinutes(),</span><br><span class="line">        <span class="built_in">second</span> = date.getSeconds();</span><br><span class="line">        <span class="built_in">month</span> = checkTime(<span class="built_in">month</span>);</span><br><span class="line">        <span class="built_in">day</span> = checkTime(<span class="built_in">day</span>);</span><br><span class="line">        <span class="built_in">hour</span> = checkTime(<span class="built_in">hour</span>);</span><br><span class="line">        <span class="built_in">minute</span> = checkTime(<span class="built_in">minute</span>);</span><br><span class="line">        <span class="built_in">second</span> = checkTime(<span class="built_in">second</span>);</span><br><span class="line">     function checkTime(i) &#123;</span><br><span class="line">        <span class="built_in">if</span> (i &lt; <span class="number">10</span>) &#123;</span><br><span class="line">                i = <span class="string">&quot;0&quot;</span> + i;</span><br><span class="line">       &#125;</span><br><span class="line">      return i;</span><br><span class="line">    &#125;</span><br><span class="line">    return <span class="string">&quot;&quot;</span> + <span class="built_in">year</span> + <span class="string">&quot;年&quot;</span> + <span class="built_in">month</span> + <span class="string">&quot;月&quot;</span> + <span class="built_in">day</span> + <span class="string">&quot;日&quot;</span> + <span class="built_in">hour</span> + <span class="string">&quot;时&quot;</span> + <span class="built_in">minute</span> + <span class="string">&quot;分&quot;</span> + <span class="built_in">second</span> + <span class="string">&quot;秒&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="14、获得滚动条的滚动距离"><a href="#14、获得滚动条的滚动距离" class="headerlink" title="14、获得滚动条的滚动距离"></a><strong>14、获得滚动条的滚动距离</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getScrollOffset</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">window</span>.pageXOffset) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">x</span>: <span class="built_in">window</span>.pageXOffset,</span><br><span class="line">            <span class="attr">y</span>: <span class="built_in">window</span>.pageYOffset</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">x</span>: <span class="built_in">document</span>.body.scrollLeft + <span class="built_in">document</span>.documentElement.scrollLeft,</span><br><span class="line">            <span class="attr">y</span>: <span class="built_in">document</span>.body.scrollTop + <span class="built_in">document</span>.documentElement.scrollTop</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="15、获得视口的尺寸"><a href="#15、获得视口的尺寸" class="headerlink" title="15、获得视口的尺寸"></a><strong>15、获得视口的尺寸</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getViewportOffset</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">window</span>.innerWidth) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">w</span>: <span class="built_in">window</span>.innerWidth,</span><br><span class="line">            <span class="attr">h</span>: <span class="built_in">window</span>.innerHeight</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// ie8及其以下</span></span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">document</span>.compatMode === <span class="string">&quot;BackCompat&quot;</span>) &#123;</span><br><span class="line">            <span class="comment">// 怪异模式</span></span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">                <span class="attr">w</span>: <span class="built_in">document</span>.body.clientWidth,</span><br><span class="line">                <span class="attr">h</span>: <span class="built_in">document</span>.body.clientHeight</span><br><span class="line">            &#125;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="comment">// 标准模式</span></span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">                <span class="attr">w</span>: <span class="built_in">document</span>.documentElement.clientWidth,</span><br><span class="line">                <span class="attr">h</span>: <span class="built_in">document</span>.documentElement.clientHeight</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="16、获取任一元素的任意属性"><a href="#16、获取任一元素的任意属性" class="headerlink" title="16、获取任一元素的任意属性"></a><strong>16、获取任一元素的任意属性</strong></h5><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> get<span class="constructor">Style(<span class="params">elem</span>, <span class="params">prop</span>)</span> &#123;</span><br><span class="line">    return window.getComputedStyle ? window.get<span class="constructor">ComputedStyle(<span class="params">elem</span>, <span class="params">null</span>)</span><span class="literal">[<span class="identifier">prop</span>]</span> : elem.currentStyle<span class="literal">[<span class="identifier">prop</span>]</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="17、绑定事件的兼容代码"><a href="#17、绑定事件的兼容代码" class="headerlink" title="17、绑定事件的兼容代码"></a><strong>17、绑定事件的兼容代码</strong></h5><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> add<span class="constructor">Event(<span class="params">elem</span>, <span class="params">type</span>, <span class="params">handle</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (elem.addEventListener) &#123; <span class="comment">//非ie和非ie9</span></span><br><span class="line">        elem.add<span class="constructor">EventListener(<span class="params">type</span>, <span class="params">handle</span>, <span class="params">false</span>)</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (elem.attachEvent) &#123; <span class="comment">//ie6到ie8</span></span><br><span class="line">        elem.attach<span class="constructor">Event(&#x27;<span class="params">on</span>&#x27; + <span class="params">type</span>, <span class="params">function</span> ()</span> &#123;</span><br><span class="line">            handle.call(elem);</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        elem<span class="literal">[&#x27;<span class="identifier">on</span>&#x27; + <span class="identifier">type</span>]</span> = handle;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="18、解绑事件"><a href="#18、解绑事件" class="headerlink" title="18、解绑事件"></a><strong>18、解绑事件</strong></h5><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> remove<span class="constructor">Event(<span class="params">elem</span>, <span class="params">type</span>, <span class="params">handle</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (elem.removeEventListener) &#123; <span class="comment">//非ie和非ie9</span></span><br><span class="line">        elem.remove<span class="constructor">EventListener(<span class="params">type</span>, <span class="params">handle</span>, <span class="params">false</span>)</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (elem.detachEvent) &#123; <span class="comment">//ie6到ie8</span></span><br><span class="line">        elem.detach<span class="constructor">Event(&#x27;<span class="params">on</span>&#x27; + <span class="params">type</span>, <span class="params">handle</span>)</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        elem<span class="literal">[&#x27;<span class="identifier">on</span>&#x27; + <span class="identifier">type</span>]</span> = null;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="19、取消冒泡的兼容代码"><a href="#19、取消冒泡的兼容代码" class="headerlink" title="19、取消冒泡的兼容代码"></a><strong>19、取消冒泡的兼容代码</strong></h5><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> stop<span class="constructor">Bubble(<span class="params">e</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (e<span class="operator"> &amp;&amp; </span>e.stopPropagation) &#123;</span><br><span class="line">        e.stop<span class="constructor">Propagation()</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        window.event.cancelBubble = <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="20、检验字符串是否是回文"><a href="#20、检验字符串是否是回文" class="headerlink" title="20、检验字符串是否是回文"></a><strong>20、检验字符串是否是回文</strong></h5><figure class="highlight axapta"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">function isPalina(<span class="built_in">str</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (Object.prototype.toString.call(<span class="built_in">str</span>) !== <span class="string">&#x27;[object String]&#x27;</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">var</span> len = <span class="built_in">str</span>.length;</span><br><span class="line">    <span class="keyword">for</span> (<span class="built_in">var</span> i = <span class="number">0</span>; i &lt; len / <span class="number">2</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">str</span>[i] != <span class="built_in">str</span>[len - <span class="number">1</span> - i]) &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="21、检验字符串是否是回文"><a href="#21、检验字符串是否是回文" class="headerlink" title="21、检验字符串是否是回文"></a><strong>21、检验字符串是否是回文</strong></h5><figure class="highlight processing"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function isPalindrome(<span class="built_in">str</span>) &#123;</span><br><span class="line">    <span class="built_in">str</span> = <span class="built_in">str</span>.replace(/\W/g, <span class="string">&#x27;&#x27;</span>).toLowerCase();</span><br><span class="line">    console.<span class="built_in">log</span>(<span class="built_in">str</span>)</span><br><span class="line">    <span class="keyword">return</span> (<span class="built_in">str</span> == <span class="built_in">str</span>.<span class="built_in">split</span>(<span class="string">&#x27;&#x27;</span>).<span class="built_in">reverse</span>().<span class="built_in">join</span>(<span class="string">&#x27;&#x27;</span>))</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="22、兼容getElementsByClassName方法"><a href="#22、兼容getElementsByClassName方法" class="headerlink" title="22、兼容getElementsByClassName方法"></a><strong>22、兼容getElementsByClassName方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = <span class="function"><span class="keyword">function</span> (<span class="params">_className</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> allDomArray = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&#x27;*&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> lastDomArray = [];</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">trimSpace</span>(<span class="params">strClass</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> reg = <span class="regexp">/\s+/g</span>;</span><br><span class="line">        <span class="keyword">return</span> strClass.replace(reg, <span class="string">&#x27; &#x27;</span>).trim()</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; allDomArray.length; i++) &#123;</span><br><span class="line">        <span class="keyword">var</span> classArray = trimSpace(allDomArray[i].className).split(<span class="string">&#x27; &#x27;</span>);</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; classArray.length; j++) &#123;</span><br><span class="line">            <span class="keyword">if</span> (classArray[j] == _className) &#123;</span><br><span class="line">                lastDomArray.push(allDomArray[i]);</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> lastDomArray;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="23、运动函数"><a href="#23、运动函数" class="headerlink" title="23、运动函数"></a><strong>23、运动函数</strong></h5><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> animate(obj, <span class="type">json</span>, callback) &#123;</span><br><span class="line">    clearInterval(obj.timer);</span><br><span class="line">    var speed,</span><br><span class="line">        <span class="keyword">current</span>;</span><br><span class="line">    obj.timer = setInterval(<span class="keyword">function</span> () &#123;</span><br><span class="line">        var <span class="keyword">lock</span> = <span class="keyword">true</span>;</span><br><span class="line">        <span class="keyword">for</span> (var prop <span class="keyword">in</span> <span class="type">json</span>) &#123;</span><br><span class="line">            <span class="keyword">if</span> (prop == <span class="string">&#x27;opacity&#x27;</span>) &#123;</span><br><span class="line">                <span class="keyword">current</span> = parseFloat(<span class="keyword">window</span>.getComputedStyle(obj, <span class="keyword">null</span>)[prop]) * <span class="number">100</span>;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="keyword">current</span> = parseInt(<span class="keyword">window</span>.getComputedStyle(obj, <span class="keyword">null</span>)[prop]);</span><br><span class="line">            &#125;</span><br><span class="line">            speed = (<span class="type">json</span>[prop] - <span class="keyword">current</span>) / <span class="number">7</span>;</span><br><span class="line">            speed = speed &gt; <span class="number">0</span> ? Math.ceil(speed) : Math.floor(speed);</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span> (prop == <span class="string">&#x27;opacity&#x27;</span>) &#123;</span><br><span class="line">                obj.style[prop] = (<span class="keyword">current</span> + speed) / <span class="number">100</span>;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                obj.style[prop] = <span class="keyword">current</span> + speed + <span class="string">&#x27;px&#x27;</span>;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">if</span> (<span class="keyword">current</span> != <span class="type">json</span>[prop]) &#123;</span><br><span class="line">                <span class="keyword">lock</span> = <span class="keyword">false</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">lock</span>) &#123;</span><br><span class="line">            clearInterval(obj.timer);</span><br><span class="line">            typeof callback == <span class="string">&#x27;function&#x27;</span> ? callback() : <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;, <span class="number">30</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="24、弹性运动"><a href="#24、弹性运动" class="headerlink" title="24、弹性运动"></a><strong>24、弹性运动</strong></h5><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="constructor">ElasticMovement(<span class="params">obj</span>, <span class="params">target</span>)</span> &#123;</span><br><span class="line">    clear<span class="constructor">Interval(<span class="params">obj</span>.<span class="params">timer</span>)</span>;</span><br><span class="line">    var iSpeed = <span class="number">40</span>,</span><br><span class="line">        a, u = <span class="number">0.8</span>;</span><br><span class="line">    obj.timer = set<span class="constructor">Interval(<span class="params">function</span> ()</span> &#123;</span><br><span class="line">        a = (target - obj.offsetLeft)<span class="operator"> / </span><span class="number">8</span>;</span><br><span class="line">        iSpeed = iSpeed + a;</span><br><span class="line">        iSpeed = iSpeed<span class="operator"> * </span>u;</span><br><span class="line">        <span class="keyword">if</span> (<span class="module-access"><span class="module"><span class="identifier">Math</span>.</span></span>abs(iSpeed) &lt;= <span class="number">1</span><span class="operator"> &amp;&amp; </span><span class="module-access"><span class="module"><span class="identifier">Math</span>.</span></span>abs(a) &lt;= <span class="number">1</span>) &#123;</span><br><span class="line">            console.log(&#x27;over&#x27;)</span><br><span class="line">            clear<span class="constructor">Interval(<span class="params">obj</span>.<span class="params">timer</span>)</span>;</span><br><span class="line">            obj.style.left = target + &#x27;px&#x27;;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            obj.style.left = obj.offsetLeft + iSpeed + &#x27;px&#x27;;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;, <span class="number">30</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="25、封装自己的forEach方法"><a href="#25、封装自己的forEach方法" class="headerlink" title="25、封装自己的forEach方法"></a><strong>25、封装自己的forEach方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myForEach = <span class="function"><span class="keyword">function</span> (<span class="params">func, obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> len = <span class="built_in">this</span>.length;</span><br><span class="line">    <span class="keyword">var</span> _this = <span class="built_in">arguments</span>[<span class="number">1</span>] ? <span class="built_in">arguments</span>[<span class="number">1</span>] : <span class="built_in">window</span>;</span><br><span class="line">    <span class="comment">// var _this=arguments[1]||window;</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        func.call(_this, <span class="built_in">this</span>[i], i, <span class="built_in">this</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="26、封装自己的filter方法"><a href="#26、封装自己的filter方法" class="headerlink" title="26、封装自己的filter方法"></a><strong>26、封装自己的filter方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myFilter = <span class="function"><span class="keyword">function</span> (<span class="params">func, obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> len = <span class="built_in">this</span>.length;</span><br><span class="line">    <span class="keyword">var</span> arr = [];</span><br><span class="line">    <span class="keyword">var</span> _this = <span class="built_in">arguments</span>[<span class="number">1</span>] || <span class="built_in">window</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        func.call(_this, <span class="built_in">this</span>[i], i, <span class="built_in">this</span>) &amp;&amp; arr.push(<span class="built_in">this</span>[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="27、数组map方法"><a href="#27、数组map方法" class="headerlink" title="27、数组map方法"></a><strong>27、数组map方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myMap = <span class="function"><span class="keyword">function</span> (<span class="params">func</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> arr = [];</span><br><span class="line">    <span class="keyword">var</span> len = <span class="built_in">this</span>.length;</span><br><span class="line">    <span class="keyword">var</span> _this = <span class="built_in">arguments</span>[<span class="number">1</span>] || <span class="built_in">window</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        arr.push(func.call(_this, <span class="built_in">this</span>[i], i, <span class="built_in">this</span>));</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="28、数组every方法"><a href="#28、数组every方法" class="headerlink" title="28、数组every方法"></a><strong>28、数组every方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.myEvery = <span class="function"><span class="keyword">function</span> (<span class="params">func</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> flag = <span class="literal">true</span>;</span><br><span class="line">    <span class="keyword">var</span> len = <span class="built_in">this</span>.length;</span><br><span class="line">    <span class="keyword">var</span> _this = <span class="built_in">arguments</span>[<span class="number">1</span>] || <span class="built_in">window</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (func.apply(_this, [<span class="built_in">this</span>[i], i, <span class="built_in">this</span>]) == <span class="literal">false</span>) &#123;</span><br><span class="line">            flag = <span class="literal">false</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> flag;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="29、数组reduce方法"><a href="#29、数组reduce方法" class="headerlink" title="29、数组reduce方法"></a><strong>29、数组reduce方法</strong></h5><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">Array.prototype.myReduce = function (func, initialValue) &#123;</span><br><span class="line">    <span class="keyword">var</span> len = <span class="keyword">this</span>.length,</span><br><span class="line">        nextValue,</span><br><span class="line">        i;</span><br><span class="line">    <span class="keyword">if</span> (!initialValue) &#123;</span><br><span class="line">        <span class="comment">// 没有传第二个参数</span></span><br><span class="line">        nextValue = <span class="keyword">this</span>[<span class="number">0</span>];</span><br><span class="line">        i = <span class="number">1</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 传了第二个参数</span></span><br><span class="line">        nextValue = initialValue;</span><br><span class="line">        i = <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">for</span> (; i &lt; len; i++) &#123;</span><br><span class="line">        nextValue = func(nextValue, <span class="keyword">this</span>[i], i, <span class="keyword">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> nextValue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="30、获取url中的参数（1）"><a href="#30、获取url中的参数（1）" class="headerlink" title="30、获取url中的参数（1）"></a><strong>30、获取url中的参数（1）</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getWindonHref</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> sHref = <span class="built_in">window</span>.location.href;</span><br><span class="line">    <span class="keyword">var</span> args = sHref.split(<span class="string">&#x27;?&#x27;</span>);</span><br><span class="line">    <span class="keyword">if</span> (args[<span class="number">0</span>] === sHref) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> hrefarr = args[<span class="number">1</span>].split(<span class="string">&#x27;#&#x27;</span>)[<span class="number">0</span>].split(<span class="string">&#x27;&amp;&#x27;</span>);</span><br><span class="line">    <span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; hrefarr.length; i++) &#123;</span><br><span class="line">        hrefarr[i] = hrefarr[i].split(<span class="string">&#x27;=&#x27;</span>);</span><br><span class="line">        obj[hrefarr[i][<span class="number">0</span>]] = hrefarr[i][<span class="number">1</span>];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> obj;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="31、数组排序"><a href="#31、数组排序" class="headerlink" title="31、数组排序"></a><strong>31、数组排序</strong></h5><figure class="highlight maxima"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line">// 快排 [left] + <span class="built_in">min</span> + [right]</span><br><span class="line">function quickArr(arr) &#123;</span><br><span class="line">    <span class="keyword">if</span> (arr.<span class="built_in">length</span> &lt;= <span class="number">1</span>) &#123;</span><br><span class="line">        <span class="built_in">return</span> arr;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">var</span> left = [],</span><br><span class="line">        right = [];</span><br><span class="line">    <span class="built_in">var</span> pIndex = Math.<span class="built_in">floor</span>(arr.<span class="built_in">length</span> / <span class="number">2</span>);</span><br><span class="line">    <span class="built_in">var</span> p = arr.<span class="built_in">splice</span>(pIndex, <span class="number">1</span>)[<span class="number">0</span>];</span><br><span class="line">    <span class="keyword">for</span> (<span class="built_in">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="built_in">length</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (arr[i] &lt;= p) &#123;</span><br><span class="line">            left.<span class="built_in">push</span>(arr[i]);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            right.<span class="built_in">push</span>(arr[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    // 递归</span><br><span class="line">    <span class="built_in">return</span> quickArr(left).<span class="built_in">concat</span>([p], quickArr(right));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 冒泡</span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="built_in">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="built_in">length</span> - <span class="number">1</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="built_in">var</span> j = i + <span class="number">1</span>; j &lt; arr.<span class="built_in">length</span>; j++) &#123;</span><br><span class="line">            <span class="keyword">if</span> (arr[i] &gt; arr[j]) &#123;</span><br><span class="line">                <span class="built_in">var</span> temp = arr[i];</span><br><span class="line">                arr[i] = arr[j];</span><br><span class="line">                arr[j] = temp;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function bubbleSort(arr) &#123;</span><br><span class="line">    <span class="built_in">var</span> len = arr.<span class="built_in">length</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="built_in">var</span> i = <span class="number">0</span>; i &lt; len - <span class="number">1</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="built_in">var</span> j = <span class="number">0</span>; j &lt; len - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">            <span class="keyword">if</span> (arr[j] &gt; arr[j + <span class="number">1</span>]) &#123;</span><br><span class="line">                <span class="built_in">var</span> temp = arr[j];</span><br><span class="line">                arr[j] = arr[j + <span class="number">1</span>];</span><br><span class="line">                arr[j + <span class="number">1</span>] = temp;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="32、遍历Dom树"><a href="#32、遍历Dom树" class="headerlink" title="32、遍历Dom树"></a><strong>32、遍历Dom树</strong></h5><figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 给定页面上的DOM元素,将访问元素本身及其所有后代(不仅仅是它的直接子元素)</span></span><br><span class="line"><span class="comment">// 对于每个访问的元素，函数讲元素传递给提供的回调函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">traverse</span><span class="params">(element, callback)</span> </span>&#123;</span><br><span class="line">    callback(element);</span><br><span class="line">    <span class="keyword">var</span> list = element.children;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; list.length; i++) &#123;</span><br><span class="line">        traverse(list[i], callback);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="33、原生js封装ajax（1）"><a href="#33、原生js封装ajax（1）" class="headerlink" title="33、原生js封装ajax（1）"></a><strong>33、原生js封装ajax（1）</strong></h5><figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> ajax(<span class="keyword">method</span>, url, callback, data, flag) &#123;</span><br><span class="line">    var xhr;</span><br><span class="line">    flag = flag || <span class="keyword">true</span>;</span><br><span class="line">    <span class="keyword">method</span> = <span class="keyword">method</span>.toUpperCase();</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">window</span>.XMLHttpRequest) &#123;</span><br><span class="line">        xhr = <span class="built_in">new</span> XMLHttpRequest();</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        xhr = <span class="built_in">new</span> ActiveXObject(<span class="string">&#x27;Microsoft.XMLHttp&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    xhr.onreadystatechange = <span class="keyword">function</span> () &#123;</span><br><span class="line">        <span class="keyword">if</span> (xhr.readyState == <span class="number">4</span> &amp;&amp; xhr.status == <span class="number">200</span>) &#123;</span><br><span class="line">            console.log(<span class="number">2</span>)</span><br><span class="line">            callback(xhr.responseText);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">method</span> == <span class="string">&#x27;GET&#x27;</span>) &#123;</span><br><span class="line">        var <span class="type">date</span> = <span class="built_in">new</span> <span class="type">Date</span>(),</span><br><span class="line">        timer = <span class="type">date</span>.getTime();</span><br><span class="line">        xhr.<span class="keyword">open</span>(<span class="string">&#x27;GET&#x27;</span>, url + <span class="string">&#x27;?&#x27;</span> + data + <span class="string">&#x27;&amp;timer&#x27;</span> + timer, flag);</span><br><span class="line">        xhr.send()</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">method</span> == <span class="string">&#x27;POST&#x27;</span>) &#123;</span><br><span class="line">        xhr.<span class="keyword">open</span>(<span class="string">&#x27;POST&#x27;</span>, url, flag);</span><br><span class="line">        xhr.setRequestHeader(<span class="string">&#x27;Content-Type&#x27;</span>, <span class="string">&#x27;application/x-www-form-urlencoded&#x27;</span>);</span><br><span class="line">        xhr.send(data);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="34、异步加载script"><a href="#34、异步加载script" class="headerlink" title="34、异步加载script"></a><strong>34、异步加载script</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">loadScript</span>(<span class="params">url, callback</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> oscript = <span class="built_in">document</span>.createElement(<span class="string">&#x27;script&#x27;</span>);</span><br><span class="line">    <span class="keyword">if</span> (oscript.readyState) &#123; <span class="comment">// ie8及以下版本</span></span><br><span class="line">        oscript.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="keyword">if</span> (oscript.readyState === <span class="string">&#x27;complete&#x27;</span> || oscript.readyState === <span class="string">&#x27;loaded&#x27;</span>) &#123;</span><br><span class="line">                callback();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        oscript.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            callback()</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    oscript.src = url;</span><br><span class="line">    <span class="built_in">document</span>.body.appendChild(oscript);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="35、cookie管理"><a href="#35、cookie管理" class="headerlink" title="35、cookie管理"></a><strong>35、cookie管理</strong></h5><figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> cookie = &#123;</span><br><span class="line">    <span class="keyword">set</span>: <span class="function"><span class="keyword">function</span> <span class="params">(name, value, time)</span> </span>&#123;</span><br><span class="line">        document.cookie = name + <span class="string">&#x27;=&#x27;</span> + value + <span class="string">&#x27;; max-age=&#x27;</span> + time;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">    &#125;,</span><br><span class="line">    remove: <span class="function"><span class="keyword">function</span> <span class="params">(name)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.setCookie(name, <span class="string">&#x27;&#x27;</span>, <span class="number">-1</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="keyword">get</span>: <span class="function"><span class="keyword">function</span> <span class="params">(name, callback)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> allCookieArr = document.cookie.split(<span class="string">&#x27;; &#x27;</span>);</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; allCookieArr.length; i++) &#123;</span><br><span class="line">            <span class="keyword">var</span> itemCookieArr = allCookieArr[i].split(<span class="string">&#x27;=&#x27;</span>);</span><br><span class="line">            <span class="keyword">if</span> (itemCookieArr[<span class="number">0</span>] === name) &#123;</span><br><span class="line">                <span class="keyword">return</span> itemCookieArr[<span class="number">1</span>]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">undefined</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="36、实现bind-方法"><a href="#36、实现bind-方法" class="headerlink" title="36、实现bind()方法"></a><strong>36、实现bind()方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myBind = <span class="function"><span class="keyword">function</span> (<span class="params">target</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> target = target || <span class="built_in">window</span>;</span><br><span class="line">    <span class="keyword">var</span> _args1 = [].slice.call(<span class="built_in">arguments</span>, <span class="number">1</span>);</span><br><span class="line">    <span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">var</span> temp = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line">    <span class="keyword">var</span> F = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> _args2 = [].slice.call(<span class="built_in">arguments</span>, <span class="number">0</span>);</span><br><span class="line">        <span class="keyword">var</span> parasArr = _args1.concat(_args2);</span><br><span class="line">        <span class="keyword">return</span> self.apply(<span class="built_in">this</span> <span class="keyword">instanceof</span> temp ? <span class="built_in">this</span> : target, parasArr)</span><br><span class="line">    &#125;</span><br><span class="line">    temp.prototype = self.prototype;</span><br><span class="line">    F.prototype = <span class="keyword">new</span> temp();</span><br><span class="line">    <span class="keyword">return</span> F;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="37、实现call-方法"><a href="#37、实现call-方法" class="headerlink" title="37、实现call()方法"></a><strong>37、实现call()方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myCall = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> ctx = <span class="built_in">arguments</span>[<span class="number">0</span>] || <span class="built_in">window</span>;</span><br><span class="line">    ctx.fn = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">var</span> args = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i &lt; <span class="built_in">arguments</span>.length; i++) &#123;</span><br><span class="line">        args.push(<span class="built_in">arguments</span>[i])</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> result = ctx.fn(...args);</span><br><span class="line">    <span class="keyword">delete</span> ctx.fn;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="38、实现apply-方法"><a href="#38、实现apply-方法" class="headerlink" title="38、实现apply()方法"></a><strong>38、实现apply()方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Function</span>.prototype.myApply = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> ctx = <span class="built_in">arguments</span>[<span class="number">0</span>] || <span class="built_in">window</span>;</span><br><span class="line">    ctx.fn = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">if</span> (!<span class="built_in">arguments</span>[<span class="number">1</span>]) &#123;</span><br><span class="line">        <span class="keyword">var</span> result = ctx.fn();</span><br><span class="line">        <span class="keyword">delete</span> ctx.fn;</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> result = ctx.fn(...arguments[<span class="number">1</span>]);</span><br><span class="line">    <span class="keyword">delete</span> ctx.fn;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="39、防抖"><a href="#39、防抖" class="headerlink" title="39、防抖"></a><strong>39、防抖</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">handle, delay</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> timer = <span class="literal">null</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> _self = <span class="built_in">this</span>,</span><br><span class="line">            _args = <span class="built_in">arguments</span>;</span><br><span class="line">        <span class="built_in">clearTimeout</span>(timer);</span><br><span class="line">        timer = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            handle.apply(_self, _args)</span><br><span class="line">        &#125;, delay)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="40、节流"><a href="#40、节流" class="headerlink" title="40、节流"></a><strong>40、节流</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">throttle</span>(<span class="params">handler, wait</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> lastTime = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> nowTime = <span class="keyword">new</span> <span class="built_in">Date</span>().getTime();</span><br><span class="line">        <span class="keyword">if</span> (nowTime - lastTime &gt; wait) &#123;</span><br><span class="line">            handler.apply(<span class="built_in">this</span>, <span class="built_in">arguments</span>);</span><br><span class="line">            lastTime = nowTime;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="41、requestAnimFrame兼容性方法"><a href="#41、requestAnimFrame兼容性方法" class="headerlink" title="41、requestAnimFrame兼容性方法"></a><strong>41、requestAnimFrame兼容性方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.requestAnimFrame = (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">window</span>.requestAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.webkitRequestAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.mozRequestAnimationFrame ||</span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">callback</span>) </span>&#123;</span><br><span class="line">            <span class="built_in">window</span>.setTimeout(callback, <span class="number">1000</span> / <span class="number">60</span>);</span><br><span class="line">        &#125;;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="42、cancelAnimFrame兼容性方法"><a href="#42、cancelAnimFrame兼容性方法" class="headerlink" title="42、cancelAnimFrame兼容性方法"></a><strong>42、cancelAnimFrame兼容性方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.cancelAnimFrame = (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">window</span>.cancelAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.webkitCancelAnimationFrame ||</span><br><span class="line">        <span class="built_in">window</span>.mozCancelAnimationFrame ||</span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">id</span>) </span>&#123;</span><br><span class="line">            <span class="built_in">window</span>.clearTimeout(id);</span><br><span class="line">        &#125;;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="43、jsonp底层方法"><a href="#43、jsonp底层方法" class="headerlink" title="43、jsonp底层方法"></a><strong>43、jsonp底层方法</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">jsonp</span>(<span class="params">url, callback</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> oscript = <span class="built_in">document</span>.createElement(<span class="string">&#x27;script&#x27;</span>);</span><br><span class="line">    <span class="keyword">if</span> (oscript.readyState) &#123; <span class="comment">// ie8及以下版本</span></span><br><span class="line">        oscript.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="keyword">if</span> (oscript.readyState === <span class="string">&#x27;complete&#x27;</span> || oscript.readyState === <span class="string">&#x27;loaded&#x27;</span>) &#123;</span><br><span class="line">                callback();</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        oscript.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            callback()</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    oscript.src = url;</span><br><span class="line">    <span class="built_in">document</span>.body.appendChild(oscript);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="44、获取url上的参数（2）"><a href="#44、获取url上的参数（2）" class="headerlink" title="44、获取url上的参数（2）"></a><strong>44、获取url上的参数（2）</strong></h5><figure class="highlight nim"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">function getUrlParam(sUrl, sKey) &#123;</span><br><span class="line">    <span class="keyword">var</span> <span class="literal">result</span> = &#123;&#125;;</span><br><span class="line">    sUrl.replace(/(\w+)=(\w+)(?=[&amp;|<span class="comment">#])/g, function (ele, key, val) &#123;</span></span><br><span class="line">        <span class="keyword">if</span> (!<span class="literal">result</span>[key]) &#123;</span><br><span class="line">            <span class="literal">result</span>[key] = val;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">var</span> temp = <span class="literal">result</span>[key];</span><br><span class="line">            <span class="literal">result</span>[key] = [].concat(temp, val);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">if</span> (!sKey) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">result</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">result</span>[sKey] || &#x27;&#x27;;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="45、格式化时间"><a href="#45、格式化时间" class="headerlink" title="45、格式化时间"></a><strong>45、格式化时间</strong></h5><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">function formatDate(t, str) &#123;</span><br><span class="line">    var obj = &#123;</span><br><span class="line"><span class="symbol">        yyyy:</span> t.getFullYear(),</span><br><span class="line"><span class="symbol">        yy:</span> (<span class="string">&quot;&quot;</span> + t.getFullYear()).slice(<span class="number">-2</span>),</span><br><span class="line"><span class="symbol">        M:</span> t.getMonth() + <span class="number">1</span>,</span><br><span class="line"><span class="symbol">        MM:</span> (<span class="string">&quot;0&quot;</span> + (t.getMonth() + <span class="number">1</span>)).slice(<span class="number">-2</span>),</span><br><span class="line"><span class="symbol">        d:</span> t.getDate(),</span><br><span class="line"><span class="symbol">        dd:</span> (<span class="string">&quot;0&quot;</span> + t.getDate()).slice(<span class="number">-2</span>),</span><br><span class="line"><span class="symbol">        H:</span> t.getHours(),</span><br><span class="line"><span class="symbol">        HH:</span> (<span class="string">&quot;0&quot;</span> + t.getHours()).slice(<span class="number">-2</span>),</span><br><span class="line"><span class="symbol">        h:</span> t.getHours() % <span class="number">12</span>,</span><br><span class="line"><span class="symbol">        hh:</span> (<span class="string">&quot;0&quot;</span> + t.getHours() % <span class="number">12</span>).slice(<span class="number">-2</span>),</span><br><span class="line"><span class="symbol">        m:</span> t.getMinutes(),</span><br><span class="line"><span class="symbol">        mm:</span> (<span class="string">&quot;0&quot;</span> + t.getMinutes()).slice(<span class="number">-2</span>),</span><br><span class="line"><span class="symbol">        s:</span> t.getSeconds(),</span><br><span class="line"><span class="symbol">        ss:</span> (<span class="string">&quot;0&quot;</span> + t.getSeconds()).slice(<span class="number">-2</span>),</span><br><span class="line"><span class="symbol">        w:</span> [<span class="string">&#x27;日&#x27;</span>, <span class="string">&#x27;一&#x27;</span>, <span class="string">&#x27;二&#x27;</span>, <span class="string">&#x27;三&#x27;</span>, <span class="string">&#x27;四&#x27;</span>, <span class="string">&#x27;五&#x27;</span>, <span class="string">&#x27;六&#x27;</span>][t.getDay()]</span><br><span class="line">    &#125;;</span><br><span class="line">    return str.replace(/([a-z]+)/ig, function ($<span class="number">1</span>) &#123;</span><br><span class="line">        return obj[$<span class="number">1</span>]</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="46、验证邮箱的正则表达式"><a href="#46、验证邮箱的正则表达式" class="headerlink" title="46、验证邮箱的正则表达式"></a><strong>46、验证邮箱的正则表达式</strong></h5><figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isAvailableEmail</span>(<span class="params">sEmail</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> reg = <span class="regexp">/^([\w+.])+@\w+([.]\w+)+$/</span></span><br><span class="line">    <span class="keyword">return</span> reg.test(sEmail)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="47、函数柯里化"><a href="#47、函数柯里化" class="headerlink" title="47、函数柯里化"></a><strong>47、函数柯里化</strong></h5><figure class="highlight maxima"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">//是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术</span><br><span class="line"></span><br><span class="line">function curryIt(fn) &#123;</span><br><span class="line">    <span class="built_in">var</span> <span class="built_in">length</span> = fn.<span class="built_in">length</span>,</span><br><span class="line">        <span class="built_in">args</span> = [];</span><br><span class="line">    <span class="built_in">var</span> result = function (arg) &#123;</span><br><span class="line">        <span class="built_in">args</span>.<span class="built_in">push</span>(arg);</span><br><span class="line">        <span class="built_in">length</span>--;</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">length</span> &lt;= <span class="number">0</span>) &#123;</span><br><span class="line">            <span class="built_in">return</span> fn.<span class="built_in">apply</span>(this, <span class="built_in">args</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="built_in">return</span> result;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="48、大数相加"><a href="#48、大数相加" class="headerlink" title="48、大数相加"></a><strong>48、大数相加</strong></h5><figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sumBigNumber</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> res = <span class="string">&#x27;&#x27;</span>, <span class="comment">//结果</span></span><br><span class="line">        temp = <span class="number">0</span>; <span class="comment">//按位加的结果及进位</span></span><br><span class="line">    a = a.split(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">    b = b.split(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">    <span class="keyword">while</span> (a.length || b.length || temp) &#123;</span><br><span class="line">        <span class="comment">//~~按位非 1.类型转换，转换成数字 2.~~undefined==0 </span></span><br><span class="line">        temp += ~~a.pop() + ~~b.pop();</span><br><span class="line">        res = (temp % <span class="number">10</span>) + res;</span><br><span class="line">        temp = temp &gt; <span class="number">9</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res.replace(<span class="regexp">/^0+/</span>, <span class="string">&#x27;&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="49、单例模式"><a href="#49、单例模式" class="headerlink" title="49、单例模式"></a><strong>49、单例模式</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSingle</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (!result) &#123;</span><br><span class="line">            result = <span class="keyword">new</span> func(<span class="built_in">arguments</span>);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> result;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="50、加载js-css-style"><a href="#50、加载js-css-style" class="headerlink" title="50、加载js || css || style"></a><strong>50、加载js || css || style</strong></h5><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">const loadRes = <span class="keyword">function</span>(name, <span class="keyword">type</span>, fn) &#123; <span class="comment">// 加载js || css || style</span></span><br><span class="line">  <span class="keyword">let</span> <span class="built_in">ref</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">type</span><span class="operator"> === </span>&#x27;js&#x27;) &#123; <span class="comment">// 外部js</span></span><br><span class="line">    <span class="built_in">ref</span> = document.create<span class="constructor">Element(&#x27;<span class="params">script</span>&#x27;)</span></span><br><span class="line">    <span class="built_in">ref</span>.set<span class="constructor">Attribute(&#x27;<span class="params">type</span>&#x27;, &#x27;<span class="params">text</span><span class="operator">/</span>JavaScript&#x27;)</span></span><br><span class="line">    <span class="built_in">ref</span>.set<span class="constructor">Attribute(&#x27;<span class="params">src</span>&#x27;, <span class="params">name</span>)</span></span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">type</span><span class="operator"> === </span>&#x27;css&#x27;) &#123; <span class="comment">// 外部css</span></span><br><span class="line">    <span class="built_in">ref</span> = document.create<span class="constructor">Element(&#x27;<span class="params">link</span>&#x27;)</span></span><br><span class="line">    <span class="built_in">ref</span>.set<span class="constructor">Attribute(&#x27;<span class="params">rel</span>&#x27;, &#x27;<span class="params">stylesheet</span>&#x27;)</span></span><br><span class="line">    <span class="built_in">ref</span>.set<span class="constructor">Attribute(&#x27;<span class="params">type</span>&#x27;, &#x27;<span class="params">text</span><span class="operator">/</span><span class="params">css</span>&#x27;)</span></span><br><span class="line">    <span class="built_in">ref</span>.set<span class="constructor">Attribute(&#x27;<span class="params">href</span>&#x27;, <span class="params">name</span>)</span></span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">type</span><span class="operator"> === </span>&#x27;style&#x27;) &#123; <span class="comment">// style</span></span><br><span class="line">    <span class="built_in">ref</span> = document.create<span class="constructor">Element(&#x27;<span class="params">style</span>&#x27;)</span></span><br><span class="line">    <span class="built_in">ref</span>.innerhtml = name</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (typeof <span class="built_in">ref</span> !== &#x27;undefined&#x27;) &#123;</span><br><span class="line">    document.get<span class="constructor">ElementsByTagName(&#x27;<span class="params">head</span>&#x27;)</span><span class="literal">[<span class="number">0</span>]</span>.append<span class="constructor">Child(<span class="params">ref</span>)</span></span><br><span class="line">    <span class="built_in">ref</span>.onload = <span class="keyword">function</span><span class="literal">()</span> &#123; <span class="comment">// 加载完成执行</span></span><br><span class="line">      typeof fn<span class="operator"> === </span>&#x27;<span class="keyword">function</span>&#x27;<span class="operator"> &amp;&amp; </span>fn<span class="literal">()</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="51、获取url参数（3）"><a href="#51、获取url参数（3）" class="headerlink" title="51、获取url参数（3）"></a><strong>51、获取url参数（3）</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> getUrlParam = <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123; <span class="comment">// 获取url参数</span></span><br><span class="line">  <span class="keyword">let</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&#x27;(^|&amp;?)&#x27;</span> + name + <span class="string">&#x27;=([^&amp;]*)(&amp;|$)&#x27;</span>, <span class="string">&#x27;i&#x27;</span>)</span><br><span class="line">  <span class="keyword">let</span> r = <span class="built_in">window</span>.location.href.substr(<span class="number">1</span>).match(reg)</span><br><span class="line">  <span class="keyword">if</span> (r != <span class="literal">null</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">decodeURI</span>(r[<span class="number">2</span>])</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">undefined</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="52、本地存储"><a href="#52、本地存储" class="headerlink" title="52、本地存储"></a><strong>52、本地存储</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = &#123; <span class="comment">// 本地存储</span></span><br><span class="line">  <span class="attr">set</span>: <span class="function"><span class="keyword">function</span>(<span class="params">name, value, day</span>) </span>&#123; <span class="comment">// 设置</span></span><br><span class="line">    <span class="keyword">let</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">    <span class="keyword">let</span> time = <span class="number">0</span></span><br><span class="line">    day = (<span class="keyword">typeof</span>(day) === <span class="string">&#x27;undefined&#x27;</span> || !day) ? <span class="number">1</span> : day <span class="comment">// 时间,默认存储1天</span></span><br><span class="line">    time = d.setHours(d.getHours() + (<span class="number">24</span> * day)) <span class="comment">// 毫秒</span></span><br><span class="line">    <span class="built_in">localStorage</span>.setItem(name, <span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">      <span class="attr">data</span>: value,</span><br><span class="line">      <span class="attr">time</span>: time</span><br><span class="line">    &#125;))</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">get</span>: <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123; <span class="comment">// 获取</span></span><br><span class="line">    <span class="keyword">let</span> data = <span class="built_in">localStorage</span>.getItem(name)</span><br><span class="line">    <span class="keyword">if</span> (!data) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">let</span> obj = <span class="built_in">JSON</span>.parse(data)</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">new</span> <span class="built_in">Date</span>().getTime() &gt; obj.time) &#123; <span class="comment">// 过期</span></span><br><span class="line">      <span class="built_in">localStorage</span>.removeItem(name)</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">null</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> obj.data</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">clear</span>: <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123; <span class="comment">// 清空</span></span><br><span class="line">    <span class="keyword">if</span> (name) &#123; <span class="comment">// 删除键为name的缓存</span></span><br><span class="line">      <span class="built_in">localStorage</span>.removeItem(name)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123; <span class="comment">// 清空全部</span></span><br><span class="line">      <span class="built_in">localStorage</span>.clear()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="53、cookie操作【set，get，del】"><a href="#53、cookie操作【set，get，del】" class="headerlink" title="53、cookie操作【set，get，del】"></a><strong>53、cookie操作【set，get，del】</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> cookie = &#123; <span class="comment">// cookie操作【set，get，del】</span></span><br><span class="line">  <span class="attr">set</span>: <span class="function"><span class="keyword">function</span>(<span class="params">name, value, day</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> oDate = <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">    oDate.setDate(oDate.getDate() + (day || <span class="number">30</span>))</span><br><span class="line">    <span class="built_in">document</span>.cookie = name + <span class="string">&#x27;=&#x27;</span> + value + <span class="string">&#x27;;expires=&#x27;</span> + oDate + <span class="string">&quot;; path=/;&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">get</span>: <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> str = <span class="built_in">document</span>.cookie</span><br><span class="line">    <span class="keyword">let</span> arr = str.split(<span class="string">&#x27;; &#x27;</span>)</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">      <span class="keyword">let</span> newArr = arr[i].split(<span class="string">&#x27;=&#x27;</span>)</span><br><span class="line">      <span class="keyword">if</span> (newArr[<span class="number">0</span>] === name) &#123;</span><br><span class="line">        <span class="keyword">return</span> newArr[<span class="number">1</span>]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">del</span>: <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.set(name, <span class="string">&#x27;&#x27;</span>, -<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="54、Js获取元素样式【支持内联】"><a href="#54、Js获取元素样式【支持内联】" class="headerlink" title="54、Js获取元素样式【支持内联】"></a><strong>54、Js获取元素样式【支持内联】</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> getRealStyle = <span class="function"><span class="keyword">function</span>(<span class="params">obj, styleName</span>) </span>&#123; <span class="comment">// Js获取元素样式【支持内联】</span></span><br><span class="line">  <span class="keyword">var</span> realStyle = <span class="literal">null</span></span><br><span class="line">  <span class="keyword">if</span> (obj.currentStyle) &#123;</span><br><span class="line">    realStyle = obj.currentStyle[styleName]</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="built_in">window</span>.getComputedStyle) &#123;</span><br><span class="line">    realStyle = <span class="built_in">window</span>.getComputedStyle(obj, <span class="literal">null</span>)[styleName]</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> realStyle</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="55、时间格式化"><a href="#55、时间格式化" class="headerlink" title="55、时间格式化"></a><strong>55、时间格式化</strong></h5><figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> formatDate = <span class="function"><span class="keyword">function</span>(<span class="params">fmt, date</span>) </span>&#123; <span class="comment">// 时间格式化 【&#x27;yyyy-MM-dd hh:mm:ss&#x27;,时间】</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">date</span> !== <span class="string">&#x27;object&#x27;</span>) &#123;</span><br><span class="line">    <span class="built_in">date</span> = !<span class="built_in">date</span> ? <span class="keyword">new</span> <span class="built_in">Date</span>() : <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="built_in">date</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> o = &#123;</span><br><span class="line">    <span class="string">&#x27;M+&#x27;</span>: <span class="built_in">date</span>.getMonth() + <span class="number">1</span>, <span class="comment">// 月份</span></span><br><span class="line">    <span class="string">&#x27;d+&#x27;</span>: <span class="built_in">date</span>.getDate(), <span class="comment">// 日</span></span><br><span class="line">    <span class="string">&#x27;h+&#x27;</span>: <span class="built_in">date</span>.getHours(), <span class="comment">// 小时</span></span><br><span class="line">    <span class="string">&#x27;m+&#x27;</span>: <span class="built_in">date</span>.getMinutes(), <span class="comment">// 分</span></span><br><span class="line">    <span class="string">&#x27;s+&#x27;</span>: <span class="built_in">date</span>.getSeconds(), <span class="comment">// 秒</span></span><br><span class="line">    <span class="string">&#x27;q+&#x27;</span>: <span class="built_in">Math</span>.floor((<span class="built_in">date</span>.getMonth() + <span class="number">3</span>) / <span class="number">3</span>), <span class="comment">// 季度</span></span><br><span class="line">    <span class="string">&#x27;S&#x27;</span>: <span class="built_in">date</span>.getMilliseconds() <span class="comment">// 毫秒</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (<span class="regexp">/(y+)/</span>.test(fmt)) &#123;</span><br><span class="line">    fmt = fmt.replace(<span class="built_in">RegExp</span>.$<span class="number">1</span>, (<span class="built_in">date</span>.getFullYear() + <span class="string">&#x27;&#x27;</span>).substr(<span class="number">4</span> - <span class="built_in">RegExp</span>.$<span class="number">1.</span>length))</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> o) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&#x27;(&#x27;</span> + k + <span class="string">&#x27;)&#x27;</span>).test(fmt)) &#123;</span><br><span class="line">      fmt = fmt.replace(<span class="built_in">RegExp</span>.$<span class="number">1</span>, (<span class="built_in">RegExp</span>.$<span class="number">1.</span>length === <span class="number">1</span>) ? (o[k]) : ((<span class="string">&#x27;00&#x27;</span> + o[k]).substr((<span class="string">&#x27;&#x27;</span> + o[k]).length)))</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> fmt</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="56、原生ajax操作（2）"><a href="#56、原生ajax操作（2）" class="headerlink" title="56、原生ajax操作（2）"></a><strong>56、原生ajax操作（2）</strong></h5><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> ajax = <span class="function"><span class="keyword">function</span>(<span class="params">conf</span>) </span>&#123; <span class="comment">// ajax操作</span></span><br><span class="line">  <span class="keyword">let</span> url = conf.url,</span><br><span class="line">    data = conf.data,</span><br><span class="line">    senData = [], <span class="comment">// 封装后的数据</span></span><br><span class="line">    <span class="keyword">async</span> = conf.async !== <span class="literal">undefined</span> ? conf.async : <span class="literal">true</span>, <span class="comment">// ture为异步请求</span></span><br><span class="line">      <span class="keyword">type</span> = conf.type || <span class="string">&#x27;get&#x27;</span>, <span class="comment">// 默认请求方式get</span></span><br><span class="line">      dataType = conf.dataType || <span class="string">&#x27;json&#x27;</span>,</span><br><span class="line">      contenType = conf.contenType || <span class="string">&#x27;application/x-www-form-urlencoded&#x27;</span>,</span><br><span class="line">      success = conf.success,</span><br><span class="line">      error = conf.error,</span><br><span class="line">      isForm = conf.isForm || <span class="literal">false</span>, <span class="comment">// 是否formdata</span></span><br><span class="line">      header = conf.header || &#123;&#125;, <span class="comment">// 头部信息</span></span><br><span class="line">      xhr = <span class="string">&#x27;&#x27;</span> <span class="comment">// 创建ajax引擎对象</span></span><br><span class="line">  <span class="keyword">if</span> (data == <span class="literal">null</span>) &#123;</span><br><span class="line">    senData = <span class="string">&#x27;&#x27;</span></span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> data === <span class="string">&#x27;object&#x27;</span> &amp;&amp; !isForm) &#123; <span class="comment">// 如果data是对象，转换为字符串</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> data) &#123;</span><br><span class="line">      senData.push(<span class="built_in">encodeURIComponent</span>(k) + <span class="string">&#x27;=&#x27;</span> + <span class="built_in">encodeURIComponent</span>(data[k]))</span><br><span class="line">    &#125;</span><br><span class="line">    senData = senData.join(<span class="string">&#x27;&amp;&#x27;</span>)</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    senData = data</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    xhr = <span class="keyword">new</span> ActiveXObject(<span class="string">&#x27;microsoft.xmlhttp&#x27;</span>) <span class="comment">// IE内核系列浏览器</span></span><br><span class="line">  &#125; <span class="keyword">catch</span> (e1) &#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      xhr = <span class="keyword">new</span> XMLHttpRequest() <span class="comment">// 非IE内核浏览器</span></span><br><span class="line">    &#125; <span class="keyword">catch</span> (e2) &#123;</span><br><span class="line">      <span class="keyword">if</span> (error != <span class="literal">null</span>) &#123;</span><br><span class="line">        error(<span class="string">&#x27;不支持ajax请求&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">  xhr.open(<span class="keyword">type</span>, <span class="keyword">type</span> !== <span class="string">&#x27;get&#x27;</span> ? url : url + <span class="string">&#x27;?&#x27;</span> + senData, <span class="keyword">async</span>)</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">type</span> !== <span class="string">&#x27;get&#x27;</span> &amp;&amp; !isForm) &#123;</span><br><span class="line">    xhr.setRequestHeader(<span class="string">&#x27;content-type&#x27;</span>, contenType)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> h <span class="keyword">in</span> header) &#123;</span><br><span class="line">    xhr.setRequestHeader(h, header[h])</span><br><span class="line">  &#125;</span><br><span class="line">  xhr.send(<span class="keyword">type</span> !== <span class="string">&#x27;get&#x27;</span> ? senData : <span class="literal">null</span>)</span><br><span class="line">  xhr.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (xhr.readyState === <span class="number">4</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (xhr.status &gt;= <span class="number">200</span> &amp;&amp; xhr.status &lt; <span class="number">300</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (dataType === <span class="string">&#x27;json&#x27;</span> &amp;&amp; success != <span class="literal">null</span>) &#123;</span><br><span class="line">          <span class="keyword">let</span> res = <span class="string">&#x27;&#x27;</span></span><br><span class="line">          <span class="keyword">try</span> &#123;</span><br><span class="line">            res = <span class="built_in">eval</span>(<span class="string">&#x27;(&#x27;</span> + xhr.responseText + <span class="string">&#x27;)&#x27;</span>)</span><br><span class="line">          &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(e)</span><br><span class="line">          &#125;</span><br><span class="line">          success(res) <span class="comment">// 将json字符串转换为js对象</span></span><br><span class="line">        &#125;;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (error != <span class="literal">null</span>) &#123;</span><br><span class="line">          error(<span class="string">&#x27;通讯失败!&#x27;</span> + xhr.status)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="57、fetch请求的封装"><a href="#57、fetch请求的封装" class="headerlink" title="57、fetch请求的封装"></a><strong>57、fetch请求的封装</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fetch = <span class="function"><span class="keyword">function</span>(<span class="params">url, setting</span>) </span>&#123; <span class="comment">// fetch请求的封装</span></span><br><span class="line">  <span class="keyword">let</span> opts = &#123; <span class="comment">// 设置参数的初始值</span></span><br><span class="line">    <span class="attr">method</span>: (setting.method || <span class="string">&#x27;GET&#x27;</span>).toUpperCase(), <span class="comment">// 请求方式</span></span><br><span class="line">    <span class="attr">headers</span>: setting.headers || &#123;&#125;, <span class="comment">// 请求头设置</span></span><br><span class="line">    <span class="attr">credentials</span>: setting.credentials || <span class="literal">true</span>, <span class="comment">// 设置cookie是否一起发送</span></span><br><span class="line">    <span class="attr">body</span>: setting.body || &#123;&#125;,</span><br><span class="line">    <span class="attr">mode</span>: setting.mode || <span class="string">&#x27;no-cors&#x27;</span>, <span class="comment">// 可以设置 cors, no-cors, same-origin</span></span><br><span class="line">    <span class="attr">redirect</span>: setting.redirect || <span class="string">&#x27;follow&#x27;</span>, <span class="comment">// follow, error, manual</span></span><br><span class="line">    <span class="attr">cache</span>: setting.cache || <span class="string">&#x27;default&#x27;</span> <span class="comment">// 设置 cache 模式 (default, reload, no-cache)</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> dataType = setting.dataType || <span class="string">&#x27;json&#x27;</span> <span class="comment">// 解析方式</span></span><br><span class="line">  <span class="keyword">let</span> data = setting.data || <span class="string">&#x27;&#x27;</span> <span class="comment">// 参数</span></span><br><span class="line">  <span class="keyword">let</span> paramsFormat = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>) </span>&#123; <span class="comment">// 参数格式</span></span><br><span class="line">    <span class="keyword">var</span> str = <span class="string">&#x27;&#x27;</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> obj) &#123;</span><br><span class="line">      str += <span class="string">`<span class="subst">$&#123;i&#125;</span>=<span class="subst">$&#123;obj[i]&#125;</span>&amp;`</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> str.split(<span class="string">&#x27;&#x27;</span>).slice(<span class="number">0</span>, -<span class="number">1</span>).join(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (opts.method === <span class="string">&#x27;GET&#x27;</span>) &#123;</span><br><span class="line">    url = url + (data ? <span class="string">`?<span class="subst">$&#123;paramsFormat(data)&#125;</span>`</span> : <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    setting.body = data || &#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    fetch(url, opts).then(<span class="keyword">async</span> res =&gt; &#123;</span><br><span class="line">      <span class="keyword">let</span> data = dataType === <span class="string">&#x27;text&#x27;</span> ? <span class="keyword">await</span> res.text() : dataType === <span class="string">&#x27;blob&#x27;</span> ? <span class="keyword">await</span> res.blob() : <span class="keyword">await</span> res.json()</span><br><span class="line">      resolve(data)</span><br><span class="line">    &#125;).catch(<span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">      reject(e)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="58、设备判断：android、ios、web"><a href="#58、设备判断：android、ios、web" class="headerlink" title="58、设备判断：android、ios、web"></a><strong>58、设备判断：android、ios、web</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> isDevice = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="comment">// 判断是android还是ios还是web</span></span><br><span class="line">  <span class="keyword">var</span> ua = navigator.userAgent.toLowerCase()</span><br><span class="line">  <span class="keyword">if</span> (ua.match(<span class="regexp">/iPhone\sOS/i</span>) === <span class="string">&#x27;iphone os&#x27;</span> || ua.match(<span class="regexp">/iPad/i</span>) === <span class="string">&#x27;ipad&#x27;</span>) &#123; <span class="comment">// ios</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;iOS&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (ua.match(<span class="regexp">/Android/i</span>) === <span class="string">&#x27;android&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;Android&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&#x27;Web&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="59、判断是否为微信"><a href="#59、判断是否为微信" class="headerlink" title="59、判断是否为微信"></a><strong>59、判断是否为微信</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> isWx = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="comment">// 判断是否为微信</span></span><br><span class="line">  <span class="keyword">var</span> ua = <span class="built_in">window</span>.navigator.userAgent.toLowerCase()</span><br><span class="line">  <span class="keyword">if</span> (ua.match(<span class="regexp">/MicroMessenger/i</span>) === <span class="string">&#x27;micromessenger&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="60、文本复制功能"><a href="#60、文本复制功能" class="headerlink" title="60、文本复制功能"></a><strong>60、文本复制功能</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> copyTxt = <span class="function"><span class="keyword">function</span>(<span class="params">text, fn</span>) </span>&#123; <span class="comment">// 复制功能</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">document</span>.execCommand !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;复制失败，请长按复制&#x27;</span>)</span><br><span class="line">    <span class="keyword">return</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> dom = <span class="built_in">document</span>.createElement(<span class="string">&#x27;textarea&#x27;</span>)</span><br><span class="line">  dom.value = text</span><br><span class="line">  dom.setAttribute(<span class="string">&#x27;style&#x27;</span>, <span class="string">&#x27;display: block;width: 1px;height: 1px;&#x27;</span>)</span><br><span class="line">  <span class="built_in">document</span>.body.appendChild(dom)</span><br><span class="line">  dom.select()</span><br><span class="line">  <span class="keyword">var</span> result = <span class="built_in">document</span>.execCommand(<span class="string">&#x27;copy&#x27;</span>)</span><br><span class="line">  <span class="built_in">document</span>.body.removeChild(dom)</span><br><span class="line">  <span class="keyword">if</span> (result) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;复制成功&#x27;</span>)</span><br><span class="line">    <span class="keyword">typeof</span> fn === <span class="string">&#x27;function&#x27;</span> &amp;&amp; fn()</span><br><span class="line">    <span class="keyword">return</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">document</span>.createRange !== <span class="string">&#x27;function&#x27;</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;复制失败，请长按复制&#x27;</span>)</span><br><span class="line">    <span class="keyword">return</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> range = <span class="built_in">document</span>.createRange()</span><br><span class="line">  <span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">&#x27;div&#x27;</span>)</span><br><span class="line">  div.innerhtml = text</span><br><span class="line">  div.setAttribute(<span class="string">&#x27;style&#x27;</span>, <span class="string">&#x27;height: 1px;fontSize: 1px;overflow: hidden;&#x27;</span>)</span><br><span class="line">  <span class="built_in">document</span>.body.appendChild(div)</span><br><span class="line">  range.selectNode(div)</span><br><span class="line">  <span class="keyword">var</span> selection = <span class="built_in">window</span>.getSelection()</span><br><span class="line">  <span class="built_in">console</span>.log(selection)</span><br><span class="line">  <span class="keyword">if</span> (selection.rangeCount &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    selection.removeAllRanges()</span><br><span class="line">  &#125;</span><br><span class="line">  selection.addRange(range)</span><br><span class="line">  <span class="built_in">document</span>.execCommand(<span class="string">&#x27;copy&#x27;</span>)</span><br><span class="line">  <span class="keyword">typeof</span> fn === <span class="string">&#x27;function&#x27;</span> &amp;&amp; fn()</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;复制成功&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="61、判断是否是一个数组"><a href="#61、判断是否是一个数组" class="headerlink" title="61、判断是否是一个数组"></a><strong>61、判断是否是一个数组</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> isArray = <span class="function"><span class="keyword">function</span>(<span class="params">arr</span>) </span>&#123; <span class="comment">// 判断是否是一个数组</span></span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(arr) === <span class="string">&#x27;[object Array]&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="62、判断两个数组是否相等"><a href="#62、判断两个数组是否相等" class="headerlink" title="62、判断两个数组是否相等"></a><strong>62、判断两个数组是否相等</strong></h5><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arrayEqual = function(arr1, arr2) &#123; <span class="comment">//判断两个数组是否相等</span></span><br><span class="line">  <span class="keyword">if</span> (arr1 === arr2) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  <span class="keyword">if</span> (arr1.length != arr2.length) <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  <span class="keyword">for</span> (let i = <span class="number">0</span>; i &lt; arr1.length; ++i) &#123;</span><br><span class="line">    <span class="keyword">if</span> (arr1[i] !== arr2[i]) <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="63、时间与时间戳转换"><a href="#63、时间与时间戳转换" class="headerlink" title="63、时间与时间戳转换"></a><strong>63、时间与时间戳转换</strong></h5><figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> stamp = &#123; <span class="comment">// 时间，时间戳转换</span></span><br><span class="line">  <span class="attribute">getTime</span>: <span class="function"><span class="keyword">function</span>(<span class="params">time</span>) </span>&#123; <span class="comment">// 时间转10位时间戳</span></span><br><span class="line">    <span class="keyword">let</span> <span class="built_in">date</span> = time ? <span class="keyword">new</span> <span class="built_in">Date</span>(time) : <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.round(<span class="built_in">date</span>.getTime() / <span class="number">1000</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attribute">timeToStr</span>: <span class="function"><span class="keyword">function</span>(<span class="params">time, fmt</span>) </span>&#123; <span class="comment">// 10位时间戳转时间</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Date</span>(time * <span class="number">1000</span>).pattern(fmt || <span class="string">&#x27;yyyy-MM-dd&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="64、常用正则验证"><a href="#64、常用正则验证" class="headerlink" title="64、常用正则验证"></a><strong>64、常用正则验证</strong></h5><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> checkStr = <span class="function"><span class="keyword">function</span>(<span class="params">str, <span class="keyword">type</span></span>) </span>&#123; <span class="comment">// 常用正则验证，注意type大小写</span></span><br><span class="line">  <span class="keyword">switch</span> (<span class="keyword">type</span>) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;phone&#x27;</span>: <span class="comment">// 手机号码</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^1[3|4|5|6|7|8|9][0-9]&#123;9&#125;$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;tel&#x27;</span>: <span class="comment">// 座机</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^(0\d&#123;2,3&#125;-\d&#123;7,8&#125;)(-\d&#123;1,4&#125;)?$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;card&#x27;</span>: <span class="comment">// 身份证</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/(^\d&#123;15&#125;$)|(^\d&#123;18&#125;$)|(^\d&#123;17&#125;(\d|X|x)$)/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;pwd&#x27;</span>: <span class="comment">// 密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^[a-zA-Z]\w&#123;5,17&#125;$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;postal&#x27;</span>: <span class="comment">// 邮政编码</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/[1-9]\d&#123;5&#125;(?!\d)/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;QQ&#x27;</span>: <span class="comment">// QQ号</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^[1-9][0-9]&#123;4,9&#125;$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;email&#x27;</span>: <span class="comment">// 邮箱</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^[\w-]+(.[\w-]+)*@[\w-]+(.[\w-]+)+$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;money&#x27;</span>: <span class="comment">// 金额(小数点2位)</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^\d*(?:.\d&#123;0,2&#125;)?$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;URL&#x27;</span>: <span class="comment">// 网址</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/(http|ftp|https):/</span><span class="regexp">/[\w-_]+(.[\w-_]+)+([\w-.,@?^=%&amp;:/~+#]*[\w-@?^=%&amp;/~+#])?/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;IP&#x27;</span>: <span class="comment">// IP</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.)&#123;3&#125;(?:25[0-5]|2[0-4]\d|[01]?\d?\d))/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;date&#x27;</span>: <span class="comment">// 日期时间</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^(\d&#123;4&#125;)-(\d&#123;2&#125;)-(\d&#123;2&#125;) (\d&#123;2&#125;)(?::\d&#123;2&#125;|:(\d&#123;2&#125;):(\d&#123;2&#125;))$/</span>.test(str) ||</span><br><span class="line">        <span class="regexp">/^(\d&#123;4&#125;)-(\d&#123;2&#125;)-(\d&#123;2&#125;)$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;number&#x27;</span>: <span class="comment">// 数字</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^[0-9]$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;english&#x27;</span>: <span class="comment">// 英文</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^[a-zA-Z]+$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;chinese&#x27;</span>: <span class="comment">// 中文</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^[\u4E00-\u9FA5]+$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;lower&#x27;</span>: <span class="comment">// 小写</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^[a-z]+$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;upper&#x27;</span>: <span class="comment">// 大写</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/^[A-Z]+$/</span>.test(str)</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;HTML&#x27;</span>: <span class="comment">// HTML标记</span></span><br><span class="line">      <span class="keyword">return</span> <span class="regexp">/&lt;(&quot;[^&quot;]*&quot;|&#x27;[^&#x27;]*&#x27;|[^&#x27;&quot;&gt;])*&gt;/</span>.test(str)</span><br><span class="line">    <span class="attr">default</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="65、是否为PC端"><a href="#65、是否为PC端" class="headerlink" title="65、是否为PC端"></a><strong>65、是否为PC端</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> isPC = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="comment">// 是否为PC端</span></span><br><span class="line">  <span class="keyword">let</span> userAgentInfo = navigator.userAgent</span><br><span class="line">  <span class="keyword">let</span> Agents = [<span class="string">&#x27;Android&#x27;</span>, <span class="string">&#x27;iPhone&#x27;</span>, <span class="string">&#x27;SymbianOS&#x27;</span>, <span class="string">&#x27;Windows Phone&#x27;</span>, <span class="string">&#x27;iPad&#x27;</span>, <span class="string">&#x27;iPod&#x27;</span>]</span><br><span class="line">  <span class="keyword">let</span> flag = <span class="literal">true</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> v = <span class="number">0</span>; v &lt; Agents.length; v++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (userAgentInfo.indexOf(Agents[v]) &gt; <span class="number">0</span>) &#123;</span><br><span class="line">      flag = <span class="literal">false</span></span><br><span class="line">      <span class="keyword">break</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> flag</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="66、去除字符串空格"><a href="#66、去除字符串空格" class="headerlink" title="66、去除字符串空格"></a><strong>66、去除字符串空格</strong></h5><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> trim = <span class="function"><span class="keyword">function</span>(<span class="params">str, <span class="keyword">type</span></span>) </span>&#123; <span class="comment">// 去除空格， type:  1-所有空格  2-前后空格  3-前空格 4-后空格</span></span><br><span class="line">  <span class="keyword">type</span> = <span class="keyword">type</span> || <span class="number">1</span></span><br><span class="line">  <span class="keyword">switch</span> (<span class="keyword">type</span>) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">      <span class="keyword">return</span> str.replace(<span class="regexp">/\s+/g</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">    <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">      <span class="keyword">return</span> str.replace(<span class="regexp">/(^\s*)|(\s*$)/g</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">    <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">      <span class="keyword">return</span> str.replace(<span class="regexp">/(^\s*)/g</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">    <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">      <span class="keyword">return</span> str.replace(<span class="regexp">/(\s*$)/g</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">    <span class="attr">default</span>:</span><br><span class="line">      <span class="keyword">return</span> str</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="67、字符串大小写转换"><a href="#67、字符串大小写转换" class="headerlink" title="67、字符串大小写转换"></a><strong>67、字符串大小写转换</strong></h5><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> changeCase = <span class="function"><span class="keyword">function</span>(<span class="params">str, <span class="keyword">type</span></span>) </span>&#123; <span class="comment">// 字符串大小写转换 type:  1:首字母大写  2：首页母小写  3：大小写转换  4：全部大写  5：全部小写</span></span><br><span class="line">  <span class="keyword">type</span> = <span class="keyword">type</span> || <span class="number">4</span></span><br><span class="line">  <span class="keyword">switch</span> (<span class="keyword">type</span>) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">      <span class="keyword">return</span> str.replace(<span class="regexp">/\b\w+\b/g</span>, <span class="function"><span class="keyword">function</span>(<span class="params">word</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> word.substring(<span class="number">0</span>, <span class="number">1</span>).toUpperCase() + word.substring(<span class="number">1</span>).toLowerCase()</span><br><span class="line">      &#125;)</span><br><span class="line">    <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">      <span class="keyword">return</span> str.replace(<span class="regexp">/\b\w+\b/g</span>, <span class="function"><span class="keyword">function</span>(<span class="params">word</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> word.substring(<span class="number">0</span>, <span class="number">1</span>).toLowerCase() + word.substring(<span class="number">1</span>).toUpperCase()</span><br><span class="line">      &#125;)</span><br><span class="line">    <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">      <span class="keyword">return</span> str.split(<span class="string">&#x27;&#x27;</span>).map(<span class="function"><span class="keyword">function</span>(<span class="params">word</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="regexp">/[a-z]/</span>.test(word)) &#123;</span><br><span class="line">          <span class="keyword">return</span> word.toUpperCase()</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="keyword">return</span> word.toLowerCase()</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;).join(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line">    <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">      <span class="keyword">return</span> str.toUpperCase()</span><br><span class="line">    <span class="keyword">case</span> <span class="number">5</span>:</span><br><span class="line">      <span class="keyword">return</span> str.toLowerCase()</span><br><span class="line">    <span class="attr">default</span>:</span><br><span class="line">      <span class="keyword">return</span> str</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="68、过滤html代码"><a href="#68、过滤html代码" class="headerlink" title="68、过滤html代码"></a><strong>68、过滤html代码</strong></h5><figure class="highlight axapta"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> filterTag = function(<span class="built_in">str</span>) &#123; <span class="comment">// 过滤html代码(把&lt;&gt;转换)</span></span><br><span class="line">  <span class="built_in">str</span> = <span class="built_in">str</span>.replace(/&amp;/ig, <span class="string">&#x27;&amp;&#x27;</span>)</span><br><span class="line">  <span class="built_in">str</span> = <span class="built_in">str</span>.replace(/&lt;/ig, <span class="string">&#x27;&lt;&#x27;</span>)</span><br><span class="line">  <span class="built_in">str</span> = <span class="built_in">str</span>.replace(/&gt;/ig, <span class="string">&#x27;&gt;&#x27;</span>)</span><br><span class="line">  <span class="built_in">str</span> = <span class="built_in">str</span>.replace(<span class="string">&#x27; &#x27;</span>, <span class="string">&#x27; &#x27;</span>)</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">str</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="69、生成随机数范围"><a href="#69、生成随机数范围" class="headerlink" title="69、生成随机数范围"></a><strong>69、生成随机数范围</strong></h5><figure class="highlight processing"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="built_in">random</span> = function(<span class="built_in">min</span>, <span class="built_in">max</span>) &#123; <span class="comment">// 生成随机数范围</span></span><br><span class="line">  <span class="keyword">if</span> (arguments.length === <span class="number">2</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> Math.<span class="built_in">floor</span>(<span class="built_in">min</span> + Math.<span class="built_in">random</span>() * ((<span class="built_in">max</span> + <span class="number">1</span>) - <span class="built_in">min</span>))</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">null</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="70、阿拉伯数字转中文大写数字"><a href="#70、阿拉伯数字转中文大写数字" class="headerlink" title="70、阿拉伯数字转中文大写数字"></a><strong>70、阿拉伯数字转中文大写数字</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> numberToChinese = <span class="function"><span class="keyword">function</span>(<span class="params">num</span>) </span>&#123; <span class="comment">// 将阿拉伯数字翻译成中文的大写数字</span></span><br><span class="line">  <span class="keyword">let</span> AA = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">&#x27;零&#x27;</span>, <span class="string">&#x27;一&#x27;</span>, <span class="string">&#x27;二&#x27;</span>, <span class="string">&#x27;三&#x27;</span>, <span class="string">&#x27;四&#x27;</span>, <span class="string">&#x27;五&#x27;</span>, <span class="string">&#x27;六&#x27;</span>, <span class="string">&#x27;七&#x27;</span>, <span class="string">&#x27;八&#x27;</span>, <span class="string">&#x27;九&#x27;</span>, <span class="string">&#x27;十&#x27;</span>)</span><br><span class="line">  <span class="keyword">let</span> BB = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">&#x27;&#x27;</span>, <span class="string">&#x27;十&#x27;</span>, <span class="string">&#x27;百&#x27;</span>, <span class="string">&#x27;仟&#x27;</span>, <span class="string">&#x27;萬&#x27;</span>, <span class="string">&#x27;億&#x27;</span>, <span class="string">&#x27;点&#x27;</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">  <span class="keyword">let</span> a = (<span class="string">&#x27;&#x27;</span> + num).replace(<span class="regexp">/(^0*)/g</span>, <span class="string">&#x27;&#x27;</span>).split(<span class="string">&#x27;.&#x27;</span>)</span><br><span class="line">  <span class="keyword">let</span> k = <span class="number">0</span></span><br><span class="line">  <span class="keyword">let</span> re = <span class="string">&#x27;&#x27;</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = a[<span class="number">0</span>].length - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span><br><span class="line">    <span class="keyword">switch</span> (k) &#123;</span><br><span class="line">      <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line">        re = BB[<span class="number">7</span>] + re</span><br><span class="line">        <span class="keyword">break</span></span><br><span class="line">      <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">        <span class="keyword">if</span> (!<span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&#x27;0&#123;4&#125;//d&#123;&#x27;</span> + (a[<span class="number">0</span>].length - i - <span class="number">1</span>) + <span class="string">&#x27;&#125;$&#x27;</span>).test(a[<span class="number">0</span>])) &#123;</span><br><span class="line">          re = BB[<span class="number">4</span>] + re</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">break</span></span><br><span class="line">      <span class="keyword">case</span> <span class="number">8</span>:</span><br><span class="line">        re = BB[<span class="number">5</span>] + re</span><br><span class="line">        BB[<span class="number">7</span>] = BB[<span class="number">5</span>]</span><br><span class="line">        k = <span class="number">0</span></span><br><span class="line">        <span class="keyword">break</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (k % <span class="number">4</span> === <span class="number">2</span> &amp;&amp; a[<span class="number">0</span>].charAt(i + <span class="number">2</span>) !== <span class="number">0</span> &amp;&amp; a[<span class="number">0</span>].charAt(i + <span class="number">1</span>) === <span class="number">0</span>) &#123;</span><br><span class="line">      re = AA[<span class="number">0</span>] + re</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (a[<span class="number">0</span>].charAt(i) !== <span class="number">0</span>) &#123;</span><br><span class="line">      re = AA[a[<span class="number">0</span>].charAt(i)] + BB[k % <span class="number">4</span>] + re</span><br><span class="line">    &#125;</span><br><span class="line">    k++</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (a.length &gt; <span class="number">1</span>) &#123; <span class="comment">// 加上小数部分(如果有小数部分)</span></span><br><span class="line">    re += BB[<span class="number">6</span>]</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; a[<span class="number">1</span>].length; i++) &#123;</span><br><span class="line">      re += AA[a[<span class="number">1</span>].charAt(i)]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (re === <span class="string">&#x27;一十&#x27;</span>) &#123;</span><br><span class="line">    re = <span class="string">&#x27;十&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (re.match(<span class="regexp">/^一/</span>) &amp;&amp; re.length === <span class="number">3</span>) &#123;</span><br><span class="line">    re = re.replace(<span class="string">&#x27;一&#x27;</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> re</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="71、原生dom操作"><a href="#71、原生dom操作" class="headerlink" title="71、原生dom操作"></a><strong>71、原生dom操作</strong></h5><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> dom = &#123;</span><br><span class="line">  <span class="attr">$</span>: <span class="function"><span class="keyword">function</span>(<span class="params">selector</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> <span class="keyword">type</span> = selector.substring(<span class="number">0</span>, <span class="number">1</span>)</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">type</span> === <span class="string">&#x27;#&#x27;</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="built_in">document</span>.querySelecotor) <span class="keyword">return</span> <span class="built_in">document</span>.querySelector(selector)</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">document</span>.getElementById(selector.substring(<span class="number">1</span>))</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">type</span> === <span class="string">&#x27;.&#x27;</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="built_in">document</span>.querySelecotorAll) <span class="keyword">return</span> <span class="built_in">document</span>.querySelectorAll(selector)</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">document</span>.getElementsByClassName(selector.substring(<span class="number">1</span>))</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">document</span>[<span class="string">&#x27;querySelectorAll&#x27;</span> ? <span class="string">&#x27;querySelectorAll&#x27;</span> : <span class="string">&#x27;getElementsByTagName&#x27;</span>](selector)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">hasClass</span>: <span class="function"><span class="keyword">function</span>(<span class="params">ele, name</span>) </span>&#123; <span class="comment">/* 检测类名 */</span></span><br><span class="line">    <span class="keyword">return</span> ele.className.match(<span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&#x27;(\s|^)&#x27;</span> + name + <span class="string">&#x27;(\s|$)&#x27;</span>))</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">addClass</span>: <span class="function"><span class="keyword">function</span>(<span class="params">ele, name</span>) </span>&#123; <span class="comment">/* 添加类名 */</span></span><br><span class="line">    <span class="keyword">if</span> (!<span class="built_in">this</span>.hasClass(ele, name)) ele.className += <span class="string">&#x27; &#x27;</span> + name</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">removeClass</span>: <span class="function"><span class="keyword">function</span>(<span class="params">ele, name</span>) </span>&#123; <span class="comment">/* 删除类名 */</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">this</span>.hasClass(ele, name)) &#123;</span><br><span class="line">      <span class="keyword">let</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&#x27;(\s|^)&#x27;</span> + name + <span class="string">&#x27;(\s|$)&#x27;</span>)</span><br><span class="line">      ele.className = ele.className.replace(reg, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">replaceClass</span>: <span class="function"><span class="keyword">function</span>(<span class="params">ele, newName, oldName</span>) </span>&#123; <span class="comment">/* 替换类名 */</span></span><br><span class="line">    <span class="built_in">this</span>.removeClass(ele, oldName)</span><br><span class="line">    <span class="built_in">this</span>.addClass(ele, newName)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">siblings</span>: <span class="function"><span class="keyword">function</span>(<span class="params">ele</span>) </span>&#123; <span class="comment">/* 获取兄弟节点 */</span></span><br><span class="line">    <span class="built_in">console</span>.log(ele.parentNode)</span><br><span class="line">    <span class="keyword">let</span> chid = ele.parentNode.children,</span><br><span class="line">      eleMatch = []</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>, len = chid.length; i &lt; len; i++) &#123;</span><br><span class="line">      <span class="keyword">if</span> (chid[i] !== ele) &#123;</span><br><span class="line">        eleMatch.push(chid[i])</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> eleMatch</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">getByStyle</span>: <span class="function"><span class="keyword">function</span>(<span class="params">obj, name</span>) </span>&#123; <span class="comment">/* 获取行间样式属性 */</span></span><br><span class="line">    <span class="keyword">if</span> (obj.currentStyle) &#123;</span><br><span class="line">      <span class="keyword">return</span> obj.currentStyle[name]</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> getComputedStyle(obj, <span class="literal">false</span>)[name]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">domToStirng</span>: <span class="function"><span class="keyword">function</span>(<span class="params">htmlDOM</span>) </span>&#123; <span class="comment">/* DOM转字符串 */</span></span><br><span class="line">    <span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">&#x27;div&#x27;</span>)</span><br><span class="line">    div.appendChild(htmlDOM)</span><br><span class="line">    <span class="keyword">return</span> div.innerHTML</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">stringToDom</span>: <span class="function"><span class="keyword">function</span>(<span class="params">htmlString</span>) </span>&#123; <span class="comment">/* 字符串转DOM */</span></span><br><span class="line">    <span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">&#x27;div&#x27;</span>)</span><br><span class="line">    div.innerHTML = htmlString</span><br><span class="line">    <span class="keyword">return</span> div.children[<span class="number">0</span>]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="72、判断图片加载完成"><a href="#72、判断图片加载完成" class="headerlink" title="72、判断图片加载完成"></a><strong>72、判断图片加载完成</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> imgLoadAll = <span class="function"><span class="keyword">function</span>(<span class="params">arr, callback</span>) </span>&#123; <span class="comment">// 图片加载</span></span><br><span class="line">  <span class="keyword">let</span> arrImg = []</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">    <span class="keyword">let</span> img = <span class="keyword">new</span> Image()</span><br><span class="line">    img.src = arr[i]</span><br><span class="line">    img.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      arrImg.push(<span class="built_in">this</span>)</span><br><span class="line">      <span class="keyword">if</span> (arrImg.length == arr.length) &#123;</span><br><span class="line">        callback &amp;&amp; callback()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="73、音频加载完成操作"><a href="#73、音频加载完成操作" class="headerlink" title="73、音频加载完成操作"></a><strong>73、音频加载完成操作</strong></h5><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const loadAudio = function(<span class="attribute">src</span>, callback) &#123; // 音频加载</span><br><span class="line">  <span class="selector-tag">var</span> <span class="selector-tag">audio</span> = new Audio(<span class="attribute">src</span>)</span><br><span class="line">  <span class="selector-tag">audio</span><span class="selector-class">.onloadedmetadata</span> = callback</span><br><span class="line">  <span class="selector-tag">audio</span><span class="selector-class">.src</span> = <span class="attribute">src</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="74、光标所在位置插入字符"><a href="#74、光标所在位置插入字符" class="headerlink" title="74、光标所在位置插入字符"></a><strong>74、光标所在位置插入字符</strong></h5><figure class="highlight nix"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">const <span class="attr">insertAtCursor</span> = function(dom, val) &#123; // 光标所在位置插入字符</span><br><span class="line">  <span class="keyword">if</span> (document.selection) &#123;</span><br><span class="line">    dom.focus()</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">sel</span> = document.selection.createRange()</span><br><span class="line">    sel.<span class="attr">text</span> = val</span><br><span class="line">    sel.select()</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (dom.selectionStart || dom.<span class="attr">selectionStart</span> == &#x27;<span class="number">0</span>&#x27;) &#123;</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">startPos</span> = dom.selectionStart</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">endPos</span> = dom.selectionEnd</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">restoreTop</span> = dom.scrollTop</span><br><span class="line">    dom.<span class="attr">value</span> = dom.value.substring(<span class="number">0</span>, startPos) + val + dom.value.substring(endPos, dom.value.length)</span><br><span class="line">    <span class="keyword">if</span> (restoreTop &gt; <span class="number">0</span>) &#123;</span><br><span class="line">      dom.<span class="attr">scrollTop</span> = restoreTop</span><br><span class="line">    &#125;</span><br><span class="line">    dom.focus()</span><br><span class="line">    dom.<span class="attr">selectionStart</span> = startPos + val.length</span><br><span class="line">    dom.<span class="attr">selectionEnd</span> = startPos + val.length</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    dom.value += val</span><br><span class="line">    dom.focus()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="75、图片地址转base64"><a href="#75、图片地址转base64" class="headerlink" title="75、图片地址转base64"></a><strong>75、图片地址转base64</strong></h5><figure class="highlight maxima"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">const getBase64 = function(img) &#123; //传入图片路径，返回<span class="built_in">base64</span>，使用getBase64(url).<span class="keyword">then</span>(function(<span class="built_in">base64</span>)&#123;&#125;,function(err)&#123;&#125;); </span><br><span class="line">  <span class="built_in">let</span> getBase64Image = function(img, <span class="built_in">width</span>, <span class="built_in">height</span>) &#123; //<span class="built_in">width</span>、<span class="built_in">height</span>调用时传入具体像素值，控制大小,不传则默认图像大小</span><br><span class="line">    <span class="built_in">let</span> canvas = document.createElement(<span class="string">&quot;canvas&quot;</span>);</span><br><span class="line">    canvas.<span class="built_in">width</span> = <span class="built_in">width</span> ? <span class="built_in">width</span> : img.<span class="built_in">width</span>;</span><br><span class="line">    canvas.<span class="built_in">height</span> = <span class="built_in">height</span> ? <span class="built_in">height</span> : img.<span class="built_in">height</span>;</span><br><span class="line">    <span class="built_in">let</span> ctx = canvas.getContext(<span class="string">&quot;2d&quot;</span>);</span><br><span class="line">    ctx.drawImage(img, <span class="number">0</span>, <span class="number">0</span>, canvas.<span class="built_in">width</span>, canvas.<span class="built_in">height</span>);</span><br><span class="line">    <span class="built_in">let</span> dataURL = canvas.toDataURL();</span><br><span class="line">    <span class="built_in">return</span> dataURL;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">let</span> <span class="built_in">image</span> = <span class="built_in">new</span> Image();</span><br><span class="line">  <span class="built_in">image</span>.crossOrigin = &#x27;&#x27;;</span><br><span class="line">  <span class="built_in">image</span>.src = img;</span><br><span class="line">  <span class="built_in">let</span> deferred = $.Deferred();</span><br><span class="line">  <span class="keyword">if</span> (img) &#123;</span><br><span class="line">    <span class="built_in">image</span>.onload = function() &#123;</span><br><span class="line">      deferred.resolve(getBase64Image(<span class="built_in">image</span>));</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">return</span> deferred.promise();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="76、base64图片下载功能"><a href="#76、base64图片下载功能" class="headerlink" title="76、base64图片下载功能"></a><strong>76、base64图片下载功能</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> downloadFile = <span class="function"><span class="keyword">function</span>(<span class="params">base64, fileName</span>) </span>&#123; <span class="comment">//base64图片下载功能</span></span><br><span class="line">  <span class="keyword">let</span> base64ToBlob = <span class="function"><span class="keyword">function</span>(<span class="params">code</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> parts = code.split(<span class="string">&#x27;;base64,&#x27;</span>);</span><br><span class="line">    <span class="keyword">let</span> contentType = parts[<span class="number">0</span>].split(<span class="string">&#x27;:&#x27;</span>)[<span class="number">1</span>];</span><br><span class="line">    <span class="keyword">let</span> raw = <span class="built_in">window</span>.atob(parts[<span class="number">1</span>]);</span><br><span class="line">    <span class="keyword">let</span> rawLength = raw.length;</span><br><span class="line">    <span class="keyword">let</span> uInt8Array = <span class="keyword">new</span> <span class="built_in">Uint8Array</span>(rawLength);</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; rawLength; ++i) &#123;</span><br><span class="line">      uInt8Array[i] = raw.charCodeAt(i);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> Blob([uInt8Array], &#123;</span><br><span class="line">      <span class="attr">type</span>: contentType</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="keyword">let</span> aLink = <span class="built_in">document</span>.createElement(<span class="string">&#x27;a&#x27;</span>);</span><br><span class="line">  <span class="keyword">let</span> blob = base64ToBlob(base64); <span class="comment">//new Blob([content]);</span></span><br><span class="line">  <span class="keyword">let</span> evt = <span class="built_in">document</span>.createEvent(<span class="string">&quot;HTMLEvents&quot;</span>);</span><br><span class="line">  evt.initEvent(<span class="string">&quot;click&quot;</span>, <span class="literal">true</span>, <span class="literal">true</span>); <span class="comment">//initEvent不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为</span></span><br><span class="line">  aLink.download = fileName;</span><br><span class="line">  aLink.href = URL.createObjectURL(blob);</span><br><span class="line">  aLink.click();</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="77、浏览器是否支持webP格式图片"><a href="#77、浏览器是否支持webP格式图片" class="headerlink" title="77、浏览器是否支持webP格式图片"></a><strong>77、浏览器是否支持webP格式图片</strong></h5><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const isSupportWebP = <span class="keyword">function</span><span class="literal">()</span> &#123; <span class="comment">//判断浏览器是否支持webP格式图片</span></span><br><span class="line">  return !!<span class="literal">[]</span>.map<span class="operator"> &amp;&amp; </span>document.create<span class="constructor">Element(&#x27;<span class="params">canvas</span>&#x27;)</span>.<span class="keyword">to</span><span class="constructor">DataURL(&#x27;<span class="params">image</span><span class="operator">/</span><span class="params">webp</span>&#x27;)</span>.index<span class="constructor">Of(&#x27;<span class="params">data</span>:<span class="params">image</span><span class="operator">/</span><span class="params">webp</span>&#x27;)</span><span class="operator"> == </span><span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="78、url参数转对象"><a href="#78、url参数转对象" class="headerlink" title="78、url参数转对象"></a><strong>78、url参数转对象</strong></h5><figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> parseQueryString = <span class="function"><span class="keyword">function</span>(<span class="params">url</span>) </span>&#123; <span class="comment">//url参数转对象</span></span><br><span class="line">  <span class="built_in">url</span> = !<span class="built_in">url</span> ? <span class="attribute">window.location.href</span> : <span class="built_in">url</span>;</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">url</span>.indexOf(<span class="string">&#x27;?&#x27;</span>) === <span class="number">-1</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;&#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> search = <span class="built_in">url</span>[<span class="number">0</span>] === <span class="string">&#x27;?&#x27;</span> ? <span class="built_in">url</span>.substr(<span class="number">1</span>) : <span class="built_in">url</span>.substring(<span class="built_in">url</span>.lastIndexOf(<span class="string">&#x27;?&#x27;</span>) + <span class="number">1</span>);</span><br><span class="line">  <span class="keyword">if</span> (search === <span class="string">&#x27;&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;&#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  search = search.split(<span class="string">&#x27;&amp;&#x27;</span>);</span><br><span class="line">  <span class="keyword">let</span> query = &#123;&#125;;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; search.length; i++) &#123;</span><br><span class="line">    <span class="keyword">let</span> pair = search[i].split(<span class="string">&#x27;=&#x27;</span>);</span><br><span class="line">    query[<span class="built_in">decodeURIComponent</span>(pair[<span class="number">0</span>])] = <span class="built_in">decodeURIComponent</span>(pair[<span class="number">1</span>] || <span class="string">&#x27;&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> query;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="79、对象序列化【对象转url参数】"><a href="#79、对象序列化【对象转url参数】" class="headerlink" title="79、对象序列化【对象转url参数】"></a><strong>79、对象序列化【对象转url参数】</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> stringfyQueryString = <span class="function"><span class="keyword">function</span>(<span class="params">obj</span>) </span>&#123; <span class="comment">//对象序列化【对象转url参数】</span></span><br><span class="line">  <span class="keyword">if</span> (!obj) <span class="keyword">return</span> <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">  <span class="keyword">let</span> pairs = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">    <span class="keyword">let</span> value = obj[key];</span><br><span class="line">    <span class="keyword">if</span> (value <span class="keyword">instanceof</span> <span class="built_in">Array</span>) &#123;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; value.length; ++i) &#123;</span><br><span class="line">        pairs.push(<span class="built_in">encodeURIComponent</span>(key + <span class="string">&#x27;[&#x27;</span> + i + <span class="string">&#x27;]&#x27;</span>) + <span class="string">&#x27;=&#x27;</span> + <span class="built_in">encodeURIComponent</span>(value[i]));</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">continue</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    pairs.push(<span class="built_in">encodeURIComponent</span>(key) + <span class="string">&#x27;=&#x27;</span> + <span class="built_in">encodeURIComponent</span>(obj[key]));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> pairs.join(<span class="string">&#x27;&amp;&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="80、H5软键盘缩回、弹起回调"><a href="#80、H5软键盘缩回、弹起回调" class="headerlink" title="80、H5软键盘缩回、弹起回调"></a><strong>80、H5软键盘缩回、弹起回调</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> h5Resize = <span class="function"><span class="keyword">function</span>(<span class="params">downCb, upCb</span>) </span>&#123; <span class="comment">//当软件键盘弹起会改变当前 window.innerHeight，监听这个值变化 [downCb 当软键盘弹起后，缩回的回调,upCb 当软键盘弹起的回调]</span></span><br><span class="line">  <span class="keyword">var</span> clientHeight = <span class="built_in">window</span>.innerHeight;</span><br><span class="line">  downCb = <span class="keyword">typeof</span> downCb === <span class="string">&#x27;function&#x27;</span> ? downCb : <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  upCb = <span class="keyword">typeof</span> upCb === <span class="string">&#x27;function&#x27;</span> ? upCb : <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">  <span class="built_in">window</span>.addEventListener(<span class="string">&#x27;resize&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">var</span> height = <span class="built_in">window</span>.innerHeight;</span><br><span class="line">    <span class="keyword">if</span> (height === clientHeight) &#123;</span><br><span class="line">      downCb();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (height &lt; clientHeight) &#123;</span><br><span class="line">      upCb();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="81、函数防抖"><a href="#81、函数防抖" class="headerlink" title="81、函数防抖"></a><strong>81、函数防抖</strong></h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> debounce = <span class="function"><span class="keyword">function</span>(<span class="params">func, wait, immediate</span>) </span>&#123; <span class="comment">//函数防抖[func 函数,wait 延迟执行毫秒数,immediate true 表立即执行,false 表非立即执行,立即执行是触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果]</span></span><br><span class="line">  <span class="keyword">let</span> timeout;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> context = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">let</span> args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">if</span> (timeout) <span class="built_in">clearTimeout</span>(timeout);</span><br><span class="line">    <span class="keyword">if</span> (immediate) &#123;</span><br><span class="line">      <span class="keyword">var</span> callNow = !timeout;</span><br><span class="line">      timeout = <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        timeout = <span class="literal">null</span>;</span><br><span class="line">      &#125;, wait)</span><br><span class="line">      <span class="keyword">if</span> (callNow) func.apply(context, args)</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      timeout = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        func.apply(context, args)</span><br><span class="line">      &#125;, wait);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="82、函数节流"><a href="#82、函数节流" class="headerlink" title="82、函数节流"></a><strong>82、函数节流</strong></h5><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, wait ,<span class="keyword">type</span></span>) </span>&#123; <span class="comment">//函数节流 [func 函数 wait 延迟执行毫秒数 type 1 表时间戳版，2 表定时器版]</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">type</span>===<span class="number">1</span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> previous = <span class="number">0</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(<span class="keyword">type</span>===<span class="number">2</span>)&#123;</span><br><span class="line">        <span class="keyword">let</span> timeout;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">let</span> context = <span class="built_in">this</span>;</span><br><span class="line">        <span class="keyword">let</span> args = <span class="built_in">arguments</span>;</span><br><span class="line">        <span class="keyword">if</span>(<span class="keyword">type</span>===<span class="number">1</span>)&#123;</span><br><span class="line">            <span class="keyword">let</span> now = <span class="built_in">Date</span>.now();</span><br><span class="line">            <span class="keyword">if</span> (now - previous &gt; wait) &#123;</span><br><span class="line">                func.apply(context, args);</span><br><span class="line">                previous = now;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;<span class="keyword">else</span> <span class="keyword">if</span>(<span class="keyword">type</span>===<span class="number">2</span>)&#123;</span><br><span class="line">            <span class="keyword">if</span> (!timeout) &#123;</span><br><span class="line">                timeout = <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">                    timeout = <span class="literal">null</span>;</span><br><span class="line">                    func.apply(context, args)</span><br><span class="line">                &#125;, wait)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>文章分类</p>
<p>作者：别动我的猫y<br>链接：<a target="_blank" rel="noopener" href="https://juejin.cn/post/7031829689261883405">https://juejin.cn/post/7031829689261883405</a><br>来源：稀土掘金<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
<h2 id="本文转自：别动我的猫y"><a href="#本文转自：别动我的猫y" class="headerlink" title="本文转自：别动我的猫y"></a>本文转自：<a target="_blank" rel="noopener" href="https://juejin.cn/post/7031829689261883405">别动我的猫y</a></h2>
    </div>

<div>

<div>

    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>

</div>


</div>

    
    
    
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://weibo.com/u/6480746839">
            <span class="icon">
              <i class="fab fa-weibo"></i>
            </span>

            <span class="label">微博</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://www.zhihu.com/people/ai-xiao-92-34">
            <span class="icon">
              <i class="fab fa-zhihu"></i>
            </span>

            <span class="label">知乎</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://mp.weixin.qq.com/s/gQBZKv4EyHc_X-CSebCjIw">
            <span class="icon">
              <i class="fab fa-weixin"></i>
            </span>

            <span class="label">微信</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/12/09/axios%E7%9A%84%E4%BD%BF%E7%94%A8/" rel="prev" title="完整过一遍axios，再也不怕写请求">
      <i class="fa fa-chevron-left"></i> 完整过一遍axios，再也不怕写请求
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/12/09/Vue3%E6%95%99%E7%A8%8B/" rel="next" title="vue3保姆级教程">
      vue3保姆级教程 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-number">1.</span> <span class="nav-text"></span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AFJavaScript%E6%96%B9%E6%B3%95%E5%B0%81%E8%A3%85"><span class="nav-number">2.</span> <span class="nav-text">[常用的前端JavaScript方法封装]</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#1%E3%80%81%E8%BE%93%E5%85%A5%E4%B8%80%E4%B8%AA%E5%80%BC%EF%BC%8C%E8%BF%94%E5%9B%9E%E5%85%B6%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.0.0.0.1.</span> <span class="nav-text">1、输入一个值，返回其数据类型</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2%E3%80%81%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="nav-number">2.0.0.0.2.</span> <span class="nav-text">2、数组去重</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%8E%BB%E9%87%8D"><span class="nav-number">2.0.0.0.3.</span> <span class="nav-text">3、字符串去重</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#4%E3%80%81%E6%B7%B1%E6%8B%B7%E8%B4%9D-%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="nav-number">2.0.0.0.4.</span> <span class="nav-text">4、深拷贝 浅拷贝</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#5%E3%80%81reverse%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86%E5%92%8C%E6%89%A9%E5%B1%95"><span class="nav-number">2.0.0.0.5.</span> <span class="nav-text">5、reverse底层原理和扩展</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#6%E3%80%81%E5%9C%A3%E6%9D%AF%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%BB%A7%E6%89%BF"><span class="nav-number">2.0.0.0.6.</span> <span class="nav-text">6、圣杯模式的继承</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#7%E3%80%81%E6%89%BE%E5%87%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E7%AC%AC%E4%B8%80%E6%AC%A1%E5%8F%AA%E5%87%BA%E7%8E%B0%E4%B8%80%E6%AC%A1%E7%9A%84%E5%AD%97%E6%AF%8D"><span class="nav-number">2.0.0.0.7.</span> <span class="nav-text">7、找出字符串中第一次只出现一次的字母</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#8%E3%80%81%E6%89%BE%E5%85%83%E7%B4%A0%E7%9A%84%E7%AC%ACn%E7%BA%A7%E7%88%B6%E5%85%83%E7%B4%A0"><span class="nav-number">2.0.0.0.8.</span> <span class="nav-text">8、找元素的第n级父元素</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#9%E3%80%81-%E8%BF%94%E5%9B%9E%E5%85%83%E7%B4%A0%E7%9A%84%E7%AC%ACn%E4%B8%AA%E5%85%84%E5%BC%9F%E8%8A%82%E7%82%B9"><span class="nav-number">2.0.0.0.9.</span> <span class="nav-text">9、 返回元素的第n个兄弟节点</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#10%E3%80%81%E5%B0%81%E8%A3%85mychildren%EF%BC%8C%E8%A7%A3%E5%86%B3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98"><span class="nav-number">2.0.0.0.10.</span> <span class="nav-text">10、封装mychildren，解决浏览器的兼容问题</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#11%E3%80%81%E5%88%A4%E6%96%AD%E5%85%83%E7%B4%A0%E6%9C%89%E6%B2%A1%E6%9C%89%E5%AD%90%E5%85%83%E7%B4%A0"><span class="nav-number">2.0.0.0.11.</span> <span class="nav-text">11、判断元素有没有子元素</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#12%E3%80%81%E6%88%91%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E6%8F%92%E5%85%A5%E5%88%B0%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84%E5%90%8E%E9%9D%A2"><span class="nav-number">2.0.0.0.12.</span> <span class="nav-text">12、我一个元素插入到另一个元素的后面</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#13%E3%80%81%E8%BF%94%E5%9B%9E%E5%BD%93%E5%89%8D%E7%9A%84%E6%97%B6%E9%97%B4%EF%BC%88%E5%B9%B4%E6%9C%88%E6%97%A5%E6%97%B6%E5%88%86%E7%A7%92%EF%BC%89"><span class="nav-number">2.0.0.0.13.</span> <span class="nav-text">13、返回当前的时间（年月日时分秒）</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#14%E3%80%81%E8%8E%B7%E5%BE%97%E6%BB%9A%E5%8A%A8%E6%9D%A1%E7%9A%84%E6%BB%9A%E5%8A%A8%E8%B7%9D%E7%A6%BB"><span class="nav-number">2.0.0.0.14.</span> <span class="nav-text">14、获得滚动条的滚动距离</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#15%E3%80%81%E8%8E%B7%E5%BE%97%E8%A7%86%E5%8F%A3%E7%9A%84%E5%B0%BA%E5%AF%B8"><span class="nav-number">2.0.0.0.15.</span> <span class="nav-text">15、获得视口的尺寸</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#16%E3%80%81%E8%8E%B7%E5%8F%96%E4%BB%BB%E4%B8%80%E5%85%83%E7%B4%A0%E7%9A%84%E4%BB%BB%E6%84%8F%E5%B1%9E%E6%80%A7"><span class="nav-number">2.0.0.0.16.</span> <span class="nav-text">16、获取任一元素的任意属性</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#17%E3%80%81%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%85%BC%E5%AE%B9%E4%BB%A3%E7%A0%81"><span class="nav-number">2.0.0.0.17.</span> <span class="nav-text">17、绑定事件的兼容代码</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#18%E3%80%81%E8%A7%A3%E7%BB%91%E4%BA%8B%E4%BB%B6"><span class="nav-number">2.0.0.0.18.</span> <span class="nav-text">18、解绑事件</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#19%E3%80%81%E5%8F%96%E6%B6%88%E5%86%92%E6%B3%A1%E7%9A%84%E5%85%BC%E5%AE%B9%E4%BB%A3%E7%A0%81"><span class="nav-number">2.0.0.0.19.</span> <span class="nav-text">19、取消冒泡的兼容代码</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#20%E3%80%81%E6%A3%80%E9%AA%8C%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%98%AF%E5%90%A6%E6%98%AF%E5%9B%9E%E6%96%87"><span class="nav-number">2.0.0.0.20.</span> <span class="nav-text">20、检验字符串是否是回文</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#21%E3%80%81%E6%A3%80%E9%AA%8C%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%98%AF%E5%90%A6%E6%98%AF%E5%9B%9E%E6%96%87"><span class="nav-number">2.0.0.0.21.</span> <span class="nav-text">21、检验字符串是否是回文</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#22%E3%80%81%E5%85%BC%E5%AE%B9getElementsByClassName%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.22.</span> <span class="nav-text">22、兼容getElementsByClassName方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#23%E3%80%81%E8%BF%90%E5%8A%A8%E5%87%BD%E6%95%B0"><span class="nav-number">2.0.0.0.23.</span> <span class="nav-text">23、运动函数</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#24%E3%80%81%E5%BC%B9%E6%80%A7%E8%BF%90%E5%8A%A8"><span class="nav-number">2.0.0.0.24.</span> <span class="nav-text">24、弹性运动</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#25%E3%80%81%E5%B0%81%E8%A3%85%E8%87%AA%E5%B7%B1%E7%9A%84forEach%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.25.</span> <span class="nav-text">25、封装自己的forEach方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#26%E3%80%81%E5%B0%81%E8%A3%85%E8%87%AA%E5%B7%B1%E7%9A%84filter%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.26.</span> <span class="nav-text">26、封装自己的filter方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#27%E3%80%81%E6%95%B0%E7%BB%84map%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.27.</span> <span class="nav-text">27、数组map方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#28%E3%80%81%E6%95%B0%E7%BB%84every%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.28.</span> <span class="nav-text">28、数组every方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#29%E3%80%81%E6%95%B0%E7%BB%84reduce%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.29.</span> <span class="nav-text">29、数组reduce方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#30%E3%80%81%E8%8E%B7%E5%8F%96url%E4%B8%AD%E7%9A%84%E5%8F%82%E6%95%B0%EF%BC%881%EF%BC%89"><span class="nav-number">2.0.0.0.30.</span> <span class="nav-text">30、获取url中的参数（1）</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#31%E3%80%81%E6%95%B0%E7%BB%84%E6%8E%92%E5%BA%8F"><span class="nav-number">2.0.0.0.31.</span> <span class="nav-text">31、数组排序</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#32%E3%80%81%E9%81%8D%E5%8E%86Dom%E6%A0%91"><span class="nav-number">2.0.0.0.32.</span> <span class="nav-text">32、遍历Dom树</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#33%E3%80%81%E5%8E%9F%E7%94%9Fjs%E5%B0%81%E8%A3%85ajax%EF%BC%881%EF%BC%89"><span class="nav-number">2.0.0.0.33.</span> <span class="nav-text">33、原生js封装ajax（1）</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#34%E3%80%81%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BDscript"><span class="nav-number">2.0.0.0.34.</span> <span class="nav-text">34、异步加载script</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#35%E3%80%81cookie%E7%AE%A1%E7%90%86"><span class="nav-number">2.0.0.0.35.</span> <span class="nav-text">35、cookie管理</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#36%E3%80%81%E5%AE%9E%E7%8E%B0bind-%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.36.</span> <span class="nav-text">36、实现bind()方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#37%E3%80%81%E5%AE%9E%E7%8E%B0call-%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.37.</span> <span class="nav-text">37、实现call()方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#38%E3%80%81%E5%AE%9E%E7%8E%B0apply-%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.38.</span> <span class="nav-text">38、实现apply()方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#39%E3%80%81%E9%98%B2%E6%8A%96"><span class="nav-number">2.0.0.0.39.</span> <span class="nav-text">39、防抖</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#40%E3%80%81%E8%8A%82%E6%B5%81"><span class="nav-number">2.0.0.0.40.</span> <span class="nav-text">40、节流</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#41%E3%80%81requestAnimFrame%E5%85%BC%E5%AE%B9%E6%80%A7%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.41.</span> <span class="nav-text">41、requestAnimFrame兼容性方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#42%E3%80%81cancelAnimFrame%E5%85%BC%E5%AE%B9%E6%80%A7%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.42.</span> <span class="nav-text">42、cancelAnimFrame兼容性方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#43%E3%80%81jsonp%E5%BA%95%E5%B1%82%E6%96%B9%E6%B3%95"><span class="nav-number">2.0.0.0.43.</span> <span class="nav-text">43、jsonp底层方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#44%E3%80%81%E8%8E%B7%E5%8F%96url%E4%B8%8A%E7%9A%84%E5%8F%82%E6%95%B0%EF%BC%882%EF%BC%89"><span class="nav-number">2.0.0.0.44.</span> <span class="nav-text">44、获取url上的参数（2）</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#45%E3%80%81%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%97%B6%E9%97%B4"><span class="nav-number">2.0.0.0.45.</span> <span class="nav-text">45、格式化时间</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#46%E3%80%81%E9%AA%8C%E8%AF%81%E9%82%AE%E7%AE%B1%E7%9A%84%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-number">2.0.0.0.46.</span> <span class="nav-text">46、验证邮箱的正则表达式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#47%E3%80%81%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96"><span class="nav-number">2.0.0.0.47.</span> <span class="nav-text">47、函数柯里化</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#48%E3%80%81%E5%A4%A7%E6%95%B0%E7%9B%B8%E5%8A%A0"><span class="nav-number">2.0.0.0.48.</span> <span class="nav-text">48、大数相加</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#49%E3%80%81%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F"><span class="nav-number">2.0.0.0.49.</span> <span class="nav-text">49、单例模式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#50%E3%80%81%E5%8A%A0%E8%BD%BDjs-css-style"><span class="nav-number">2.0.0.0.50.</span> <span class="nav-text">50、加载js || css || style</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#51%E3%80%81%E8%8E%B7%E5%8F%96url%E5%8F%82%E6%95%B0%EF%BC%883%EF%BC%89"><span class="nav-number">2.0.0.0.51.</span> <span class="nav-text">51、获取url参数（3）</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#52%E3%80%81%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8"><span class="nav-number">2.0.0.0.52.</span> <span class="nav-text">52、本地存储</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#53%E3%80%81cookie%E6%93%8D%E4%BD%9C%E3%80%90set%EF%BC%8Cget%EF%BC%8Cdel%E3%80%91"><span class="nav-number">2.0.0.0.53.</span> <span class="nav-text">53、cookie操作【set，get，del】</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#54%E3%80%81Js%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F%E3%80%90%E6%94%AF%E6%8C%81%E5%86%85%E8%81%94%E3%80%91"><span class="nav-number">2.0.0.0.54.</span> <span class="nav-text">54、Js获取元素样式【支持内联】</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#55%E3%80%81%E6%97%B6%E9%97%B4%E6%A0%BC%E5%BC%8F%E5%8C%96"><span class="nav-number">2.0.0.0.55.</span> <span class="nav-text">55、时间格式化</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#56%E3%80%81%E5%8E%9F%E7%94%9Fajax%E6%93%8D%E4%BD%9C%EF%BC%882%EF%BC%89"><span class="nav-number">2.0.0.0.56.</span> <span class="nav-text">56、原生ajax操作（2）</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#57%E3%80%81fetch%E8%AF%B7%E6%B1%82%E7%9A%84%E5%B0%81%E8%A3%85"><span class="nav-number">2.0.0.0.57.</span> <span class="nav-text">57、fetch请求的封装</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#58%E3%80%81%E8%AE%BE%E5%A4%87%E5%88%A4%E6%96%AD%EF%BC%9Aandroid%E3%80%81ios%E3%80%81web"><span class="nav-number">2.0.0.0.58.</span> <span class="nav-text">58、设备判断：android、ios、web</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#59%E3%80%81%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E4%B8%BA%E5%BE%AE%E4%BF%A1"><span class="nav-number">2.0.0.0.59.</span> <span class="nav-text">59、判断是否为微信</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#60%E3%80%81%E6%96%87%E6%9C%AC%E5%A4%8D%E5%88%B6%E5%8A%9F%E8%83%BD"><span class="nav-number">2.0.0.0.60.</span> <span class="nav-text">60、文本复制功能</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#61%E3%80%81%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84"><span class="nav-number">2.0.0.0.61.</span> <span class="nav-text">61、判断是否是一个数组</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#62%E3%80%81%E5%88%A4%E6%96%AD%E4%B8%A4%E4%B8%AA%E6%95%B0%E7%BB%84%E6%98%AF%E5%90%A6%E7%9B%B8%E7%AD%89"><span class="nav-number">2.0.0.0.62.</span> <span class="nav-text">62、判断两个数组是否相等</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#63%E3%80%81%E6%97%B6%E9%97%B4%E4%B8%8E%E6%97%B6%E9%97%B4%E6%88%B3%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.0.0.0.63.</span> <span class="nav-text">63、时间与时间戳转换</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#64%E3%80%81%E5%B8%B8%E7%94%A8%E6%AD%A3%E5%88%99%E9%AA%8C%E8%AF%81"><span class="nav-number">2.0.0.0.64.</span> <span class="nav-text">64、常用正则验证</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#65%E3%80%81%E6%98%AF%E5%90%A6%E4%B8%BAPC%E7%AB%AF"><span class="nav-number">2.0.0.0.65.</span> <span class="nav-text">65、是否为PC端</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#66%E3%80%81%E5%8E%BB%E9%99%A4%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%A9%BA%E6%A0%BC"><span class="nav-number">2.0.0.0.66.</span> <span class="nav-text">66、去除字符串空格</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#67%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%A4%A7%E5%B0%8F%E5%86%99%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.0.0.0.67.</span> <span class="nav-text">67、字符串大小写转换</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#68%E3%80%81%E8%BF%87%E6%BB%A4html%E4%BB%A3%E7%A0%81"><span class="nav-number">2.0.0.0.68.</span> <span class="nav-text">68、过滤html代码</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#69%E3%80%81%E7%94%9F%E6%88%90%E9%9A%8F%E6%9C%BA%E6%95%B0%E8%8C%83%E5%9B%B4"><span class="nav-number">2.0.0.0.69.</span> <span class="nav-text">69、生成随机数范围</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#70%E3%80%81%E9%98%BF%E6%8B%89%E4%BC%AF%E6%95%B0%E5%AD%97%E8%BD%AC%E4%B8%AD%E6%96%87%E5%A4%A7%E5%86%99%E6%95%B0%E5%AD%97"><span class="nav-number">2.0.0.0.70.</span> <span class="nav-text">70、阿拉伯数字转中文大写数字</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#71%E3%80%81%E5%8E%9F%E7%94%9Fdom%E6%93%8D%E4%BD%9C"><span class="nav-number">2.0.0.0.71.</span> <span class="nav-text">71、原生dom操作</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#72%E3%80%81%E5%88%A4%E6%96%AD%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90"><span class="nav-number">2.0.0.0.72.</span> <span class="nav-text">72、判断图片加载完成</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#73%E3%80%81%E9%9F%B3%E9%A2%91%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E6%93%8D%E4%BD%9C"><span class="nav-number">2.0.0.0.73.</span> <span class="nav-text">73、音频加载完成操作</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#74%E3%80%81%E5%85%89%E6%A0%87%E6%89%80%E5%9C%A8%E4%BD%8D%E7%BD%AE%E6%8F%92%E5%85%A5%E5%AD%97%E7%AC%A6"><span class="nav-number">2.0.0.0.74.</span> <span class="nav-text">74、光标所在位置插入字符</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#75%E3%80%81%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80%E8%BD%ACbase64"><span class="nav-number">2.0.0.0.75.</span> <span class="nav-text">75、图片地址转base64</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#76%E3%80%81base64%E5%9B%BE%E7%89%87%E4%B8%8B%E8%BD%BD%E5%8A%9F%E8%83%BD"><span class="nav-number">2.0.0.0.76.</span> <span class="nav-text">76、base64图片下载功能</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#77%E3%80%81%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E5%90%A6%E6%94%AF%E6%8C%81webP%E6%A0%BC%E5%BC%8F%E5%9B%BE%E7%89%87"><span class="nav-number">2.0.0.0.77.</span> <span class="nav-text">77、浏览器是否支持webP格式图片</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#78%E3%80%81url%E5%8F%82%E6%95%B0%E8%BD%AC%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.0.0.0.78.</span> <span class="nav-text">78、url参数转对象</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#79%E3%80%81%E5%AF%B9%E8%B1%A1%E5%BA%8F%E5%88%97%E5%8C%96%E3%80%90%E5%AF%B9%E8%B1%A1%E8%BD%ACurl%E5%8F%82%E6%95%B0%E3%80%91"><span class="nav-number">2.0.0.0.79.</span> <span class="nav-text">79、对象序列化【对象转url参数】</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#80%E3%80%81H5%E8%BD%AF%E9%94%AE%E7%9B%98%E7%BC%A9%E5%9B%9E%E3%80%81%E5%BC%B9%E8%B5%B7%E5%9B%9E%E8%B0%83"><span class="nav-number">2.0.0.0.80.</span> <span class="nav-text">80、H5软键盘缩回、弹起回调</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#81%E3%80%81%E5%87%BD%E6%95%B0%E9%98%B2%E6%8A%96"><span class="nav-number">2.0.0.0.81.</span> <span class="nav-text">81、函数防抖</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#82%E3%80%81%E5%87%BD%E6%95%B0%E8%8A%82%E6%B5%81"><span class="nav-number">2.0.0.0.82.</span> <span class="nav-text">82、函数节流</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%AC%E6%96%87%E8%BD%AC%E8%87%AA%EF%BC%9A%E5%88%AB%E5%8A%A8%E6%88%91%E7%9A%84%E7%8C%ABy"><span class="nav-number">2.1.</span> <span class="nav-text">本文转自：别动我的猫y</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="爱笑"
      src="/images/title.jpg">
  <p class="site-author-name" itemprop="name">爱笑</p>
  <div class="site-description" itemprop="description">热衷于前端，热衷于王者，王者峡谷乱杀 -_-</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">14</span>
          <span class="site-state-item-name">文章</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="sidebar-button motion-element"><i class="fa fa-comment"></i>
    评论
  </a>
  </div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/aixiao0322" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://gitee.com/aixiao0322" title="gitee → https:&#x2F;&#x2F;gitee.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-gratipay fa-fw"></i>gitee</a>
      </span>
      <span class="links-of-author-item">
        <a href="/aini17630247921@163.com" title="E-Mail → aini17630247921@163.com"><i class="fab fa-youtube fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://juejin.cn/user/255500362975704" title="掘金 → https:&#x2F;&#x2F;juejin.cn&#x2F;user&#x2F;255500362975704" rel="noopener" target="_blank"><i class="fab fa-artstation fa-fw"></i>掘金</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">爱笑</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  
















  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'l6M4SnuhiCKBnxpPdX1WbBB9-gzGzoHsz',
      appKey     : 'u1jJ2Fs9DGFdfpIgDQll55ju',
      placeholder: "请举手发言.... 请你填写自己的昵称，邮箱以及博客链接，为了更方便的找到您",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : true,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : true,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

</body>
</html>
